Uvod u web components

Web komponente su skup značajki koje pružaju standardni model komponenata za web koji omogućuje enkapsulaciju i interoperabilnost pojedinih HTML elemenata.

Znači, radi se tehnologiji koja nam omogućava da pravimo komponente poput onih u React-u. To nam je korisno zbog toga što možemo imati komponente koje možemo ponovno iskoristiti. Tako da jednostavno možemo uvesti komponente kao js/css datoteke i prilagoditi ih ostatku HTML stranice. Nećemo se baviti detaljno sa svime onim što su web komponente nego samo sa dijelom koji nam omogućava da kod komponente ponovno iskoristimo.

Ovakve komponente su korisne i u WordPress-u gdje ih koristimo preko ‘raw html’ bloka.

Komponente sam ugradio u svoj mini CSS boilerplate.

Jednostavni primjer

Bitno je da HTML TAG naziv bude u ‘dva-dijela’ znači a nakon toga, bilo bi onda poželjno da i naziv JS klase bude camelCase ‘DvaDijela’. Imamo CSS dio u kojem ćemo samo dizajnirati obični pravokutnik (dugme) sa nazivom komponente.

ds-hello-world{
    color: white;
    width: 24px;
    height: 24px;
    padding: 20px;
    background: blueviolet;
}

U HTML ćemo ubaciti nešto što je slično JSX-u, odnosno onome što se događa u React-u:

<ds-hello-world name="Hello Damir"> </ds-hello-world>

I da dalje ne kompliciram, evo JS dio:

class DsHelloWorld extends HTMLElement 
{
    constructor() 
    {
        super();
        const name = this.getAttribute('name');
        this.innerHTML = name;        
    }
}
customElements.define( 'ds-hello-world', DsHelloWorld);

WordPress ‘raw html’ blok izgleda ovako:

<style>
ds-hello-world{
    color: white;
    width: 24px;
    height: 24px;
    padding: 20px;
    background: blueviolet;
}
</style>

<ds-hello-world name="Hello Damir"> </ds-hello-world>

<script>
class DsHelloWorld extends HTMLElement 
{
    constructor() 
    {
        super();
        const name = this.getAttribute('name');
        this.innerHTML = name;        
    }
}

customElements.define( 'ds-hello-world', DsHelloWorld);
</script>

…a integracija ovako:

Ostali primjeri

Nešto napredniji primjeri su ovdje:

Checkbox komponenta:

Accordion komponenta: