Verkkokomponentit

Verkkokomponentit ovat standardoitujen verkkoteknologioiden muodostama tapa luoda itsenäisiä, uudelleenkäytettäviä UI-komponentteja HTML:lle. Niiden tavoitteena on tarjota kapseloituja, helposti integroitavia osia, jotka toimivat missä tahansa verkkosovelluksessa riippumatta käytetystä JavaScript-kehyksestä. Verkkokomponentit koostuvat yleensä kolmesta ydinosiosta: Custom Elements, Shadow DOM ja HTML Templates. Custom Elements määrittelee uuden HTML-tunnisteen, jonka käyttäjä voi lisätä sivulle; Shadow DOM luo kapsoloidun rakenteen ja tyylin sisäpuolelle, jolloin ulkoisen tyylin ja JavaScriptin vaikutus pysyvät erillään; HTML Templates mahdollistavat inertin DOM-rakenteen, jonka voi instansioida ja liittää sivulle tarpeen mukaan. Usein hyödynnetään myös ES-moduuleja komponenttien jakamiseen.

Käyttö ja elinkaari: määrittelet luokan, joka perii HTMLElementin, toteutat elinkaariloukkaset kuten connectedCallback, disconnectedCallback ja attributeChangedCallback, sekä rekisteröit komponentin customElements.define-nimellä. Tämän jälkeen komponentti voidaan lisätä HTML:ään samalla tavalla kuin tavallinen elementti, ja sen sisäinen Shadow DOM eristää rakenteen ja tyylit.

Hyödyt ja käyttökohteet: kapselointi, uudelleenkäytettävyys ja design-systeemien tukeminen. Ne soveltuvat erityisesti pienempiin widgetteihin, design-systeemeihin sekä mikrofrontend-arkkitehtuureihin, joissa tarvitaan framework-riippuvuuksista vapaata komponentteja. Rajoitteita: vanhojen selainten tuki voi vaatia polyfillien käyttöä, sekä palvelinpuolen renderöinti eli SSR ja SEO-optimointi voivat vaatia erityistä huomioita. Verkkokomponenttien ekosysteemi on kasvanut, ja ne ovat nykyään tuettuja suurimmissa selaimissa.