M

MLOG

Hrvatski

Sveobuhvatan vodič za web komponente koji pokriva njihove prednosti, upotrebu, podršku preglednika i najbolje prakse za izradu višekratnih UI elemenata.

Web komponente: Izrada višekratno upotrebljivih elemenata za moderni web

U današnjem okruženju web razvoja koje se brzo mijenja, stvaranje modularnog, višekratno upotrebljivog i održivog koda je od presudne važnosti. Web komponente nude moćno rješenje za izgradnju upravo toga: prilagođenih, enkapsuliranih i interoperabilnih UI elemenata koji se mogu koristiti u različitim web projektima i radnim okvirima. Ovaj sveobuhvatni vodič zaronit će u temeljne koncepte web komponenata, istražiti njihove prednosti i pružiti praktične primjere kako biste započeli.

Što su web komponente?

Web komponente su skup web standarda koji vam omogućuju stvaranje višekratno upotrebljivih prilagođenih HTML elemenata s enkapsuliranim stilom i ponašanjem. One vam u suštini omogućuju da proširite mogućnosti samog HTML-a, gradeći prilagođene oznake koje se mogu tretirati kao bilo koji drugi standardni HTML element.

Zamislite ih kao Lego kockice za web. Svaka kockica (web komponenta) predstavlja određeni dio funkcionalnosti, a vi možete kombinirati te kockice za izgradnju složenih korisničkih sučelja. Ljepota web komponenata je u njihovoj višekratnoj upotrebljivosti i izolaciji; mogu se koristiti u bilo kojem web projektu, bez obzira na radni okvir koji se koristi (ili čak i bez ikakvog okvira), a njihov interni stil i ponašanje neće ometati ostatak vaše aplikacije.

Temeljne tehnologije web komponenata

Web komponente temelje se na četiri temeljne tehnologije:

Prednosti korištenja web komponenata

Usvajanje web komponenata u vašem razvojnom procesu nudi brojne prednosti:

Jednostavan primjer: Izrada prilagođenog elementa brojača

Ilustrirajmo stvaranje osnovne web komponente: prilagođenog elementa brojača.

1. Definirajte klasu prilagođenog elementa

Prvo, definiramo JavaScript klasu koja nasljeđuje klasu `HTMLElement`.

class MyCounter extends HTMLElement {
 constructor() {
 super();
 // Povežite shadow DOM s elementom.
 this.attachShadow({ mode: 'open' });

 // Inicijalizirajte vrijednost brojača.
 this._count = 0;

 // Stvorite element gumba.
 this.button = document.createElement('button');
 this.button.textContent = 'Increment';
 this.shadowRoot.appendChild(this.button);

 // Stvorite span element za prikaz brojača.
 this.span = document.createElement('span');
 this.span.textContent = `Count: ${this._count}`;
 this.shadowRoot.appendChild(this.span);

 // Povežite metodu increment s događajem klika na gumb.
 this.button.addEventListener('click', this.increment.bind(this));
 }

 increment() {
 this._count++;
 this.span.textContent = `Count: ${this._count}`;
 }

 connectedCallback() {
 console.log('Prilagođeni element spojen na DOM.');
 }

 disconnectedCallback() {
 console.log('Prilagođeni element odspojen s DOM-a.');
 }

 adoptedCallback() {
 console.log('Prilagođeni element premješten u novi dokument.');
 }

 attributeChangedCallback(name, oldValue, newValue) {
 console.log(`Atribut ${name} promijenjen s ${oldValue} na ${newValue}.`);
 }

 static get observedAttributes() {
 return ['count'];
 }
}

2. Definirajte Shadow DOM

Linija `attachShadow({ mode: 'open' })` povezuje shadow DOM s elementom. Opcija `mode: 'open'` omogućuje JavaScriptu izvan komponente pristup shadow DOM-u, dok bi `mode: 'closed'` spriječio vanjski pristup.

3. Registrirajte prilagođeni element

Zatim, registriramo prilagođeni element u pregledniku koristeći metodu `customElements.define()`.

customElements.define('my-counter', MyCounter);

4. Korištenje prilagođenog elementa u HTML-u

Sada možete koristiti element `` u svom HTML-u kao bilo koji drugi HTML element.

<my-counter></my-counter>

Ovaj kod će iscrtati gumb s natpisom "Increment" i span koji prikazuje trenutno stanje brojača (počevši od 0). Klikom na gumb brojač će se povećati, a prikaz ažurirati.

Dublji zaron: Shadow DOM i enkapsulacija

Shadow DOM je ključan aspekt web komponenata. On pruža enkapsulaciju stvaranjem odvojenog DOM stabla za komponentu, izolirajući njezin stil i ponašanje od ostatka stranice. To sprječava sukobe stilova i osigurava da se komponenta ponaša predvidljivo bez obzira na okruženje.

Unutar Shadow DOM-a možete definirati CSS stilove koji se primjenjuju samo na interne elemente komponente. To vam omogućuje stvaranje samostalnih komponenata koje ne ovise o vanjskim CSS datotekama.

Primjer: Stiliziranje Shadow DOM-a

constructor() {
 super();
 this.attachShadow({ mode: 'open' });

 // Stvorite element stila za shadow DOM
 const style = document.createElement('style');
 style.textContent = `
 button {
 background-color: #4CAF50;
 color: white;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
 }
 span {
 margin-left: 10px;
 font-weight: bold;
 }
 `;
 this.shadowRoot.appendChild(style);

 // Inicijalizirajte vrijednost brojača.
 this._count = 0;

 // Stvorite element gumba.
 this.button = document.createElement('button');
 this.button.textContent = 'Increment';
 this.shadowRoot.appendChild(this.button);

 // Stvorite span element za prikaz brojača.
 this.span = document.createElement('span');
 this.span.textContent = `Count: ${this._count}`;
 this.shadowRoot.appendChild(this.span);

 // Povežite metodu increment s događajem klika na gumb.
 this.button.addEventListener('click', this.increment.bind(this));
 }

U ovom primjeru, CSS stilovi definirani unutar elementa `style` primijenit će se samo na elemente gumba i span-a unutar shadow DOM-a komponente `my-counter`. Ovi stilovi neće utjecati na druge gumbe ili span-ove na stranici.

HTML predlošci: Definiranje višekratno upotrebljivih struktura

HTML predlošci pružaju način za definiranje višekratno upotrebljivih HTML struktura koje se mogu klonirati i umetnuti u DOM. Posebno su korisni za stvaranje složenih rasporeda komponenata.

Primjer: Korištenje HTML predložaka

<template id="counter-template">
 <style>
 button {
 background-color: #4CAF50;
 color: white;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
 }
 span {
 margin-left: 10px;
 font-weight: bold;
 }
 </style>
 <button>Increment</button>
 <span>Count: <span id="count-value">0</span></span>
</template>

<script>
class MyCounter extends HTMLElement {
 constructor() {
 super();
 this.attachShadow({ mode: 'open' });

 const template = document.getElementById('counter-template');
 const templateContent = template.content;
 this.shadowRoot.appendChild(templateContent.cloneNode(true));

 this.button = this.shadowRoot.querySelector('button');
 this.span = this.shadowRoot.querySelector('#count-value');
 this._count = 0;
 this.span.textContent = this._count;
 this.button.addEventListener('click', this.increment.bind(this));
 }

 increment() {
 this._count++;
 this.span.textContent = this._count;
 }
}

customElements.define('my-counter', MyCounter);
</script>

U ovom primjeru, definiramo HTML predložak s ID-jem `counter-template`. Predložak sadrži HTML strukturu i CSS stilove za našu komponentu brojača. Unutar klase `MyCounter`, kloniramo sadržaj predloška i dodajemo ga u shadow DOM. To nam omogućuje ponovnu upotrebu strukture predloška za svaku instancu komponente `my-counter`.

Atributi i svojstva

Web komponente mogu imati i atribute i svojstva (properties). Atributi se definiraju u HTML oznakama, dok se svojstva definiraju u JavaScript klasi. Promjene atributa mogu se odraziti na svojstva i obrnuto.

Primjer: Definiranje i korištenje atributa

class MyGreeting extends HTMLElement {
 constructor() {
 super();
 this.attachShadow({ mode: 'open' });
 this.shadowRoot.innerHTML = `<p>Hello, <span id="name"></span>!</p>`;
 this.nameSpan = this.shadowRoot.querySelector('#name');
 }

 static get observedAttributes() {
 return ['name'];
 }

 attributeChangedCallback(name, oldValue, newValue) {
 if (name === 'name') {
 this.nameSpan.textContent = newValue;
 }
 }
}

customElements.define('my-greeting', MyGreeting);

<my-greeting name="World"></my-greeting>
<my-greeting name="Alice"></my-greeting>

U ovom primjeru, definiramo `name` atribut za komponentu `my-greeting`. Getter `observedAttributes` govori pregledniku koje atribute treba pratiti za promjene. Kada se `name` atribut promijeni, poziva se metoda `attributeChangedCallback`, i mi ažuriramo sadržaj `span` elementa novim imenom.

Lifecycle metode (Callbacks)

Web komponente imaju nekoliko lifecycle metoda (callbacks) koje vam omogućuju izvršavanje koda u različitim fazama životnog ciklusa komponente:

Ove metode pružaju prilike za obavljanje inicijalizacije, čišćenja i drugih zadataka vezanih uz životni ciklus komponente.

Kompatibilnost preglednika i Polyfills

Web komponente podržane su u svim modernim preglednicima. Međutim, stariji preglednici mogu zahtijevati polyfille kako bi se osigurala potrebna funkcionalnost. Polyfill biblioteka `webcomponents.js` pruža sveobuhvatnu podršku za web komponente u starijim preglednicima. Da biste uključili polyfill, koristite sljedeću script oznaku:

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.6.0/webcomponents-loader.js"></script>

Općenito se preporučuje korištenje pristupa detekcije značajki, učitavajući polyfill samo ako preglednik ne podržava nativno web komponente.

Napredne tehnike i najbolje prakse

Kompozicija komponenata

Web komponente mogu se sastavljati zajedno kako bi se stvorili složeniji UI elementi. To vam omogućuje izgradnju visoko modularnih i višekratno upotrebljivih aplikacija.

Upravljanje događajima

Web komponente mogu slati i slušati prilagođene događaje. To omogućuje komponentama da komuniciraju međusobno i s ostatkom aplikacije.

Povezivanje podataka (Data Binding)

Iako web komponente ne pružaju ugrađene mehanizme za povezivanje podataka, možete implementirati povezivanje podataka koristeći prilagođeni kod ili integracijom s bibliotekom za povezivanje podataka.

Pristupačnost

Važno je osigurati da su vaše web komponente dostupne svim korisnicima, uključujući i one s invaliditetom. Slijedite najbolje prakse pristupačnosti pri dizajniranju i implementaciji vaših komponenata.

Web komponente u stvarnom svijetu: Međunarodni primjeri

Web komponente koriste tvrtke i organizacije diljem svijeta za izgradnju modernih i višekratno upotrebljivih korisničkih sučelja. Evo nekoliko primjera:

Ovo su samo neki od primjera kako se web komponente koriste u stvarnom svijetu. Tehnologija dobiva sve veću primjenu kako programeri prepoznaju njezine prednosti za izgradnju modularnih, održivih i skalabilnih web aplikacija.

Zaključak

Web komponente nude moćan pristup izgradnji višekratno upotrebljivih UI elemenata za moderni web. Korištenjem prilagođenih elemenata, shadow DOM-a i HTML predložaka, možete stvoriti samostalne komponente koje se mogu koristiti u različitim projektima i radnim okvirima. Prihvaćanje web komponenata može dovesti do modularnijih, održivijih i skalabilnijih web aplikacija. Kako se web standardi razvijaju, web komponente će i dalje igrati ključnu ulogu u oblikovanju budućnosti web razvoja.

Daljnje učenje

Počnite eksperimentirati s web komponentama već danas i otključajte moć višekratno upotrebljivih UI elemenata u svojim projektima web razvoja!