A webkomponensek olyan funkciók, amelyek szabványos komponensmodellt biztosítanak az interneten, lehetővé téve egyes HTML-elemek beágyazását és együttműködését.
Elsődleges technológiák a létrehozásukhoz: Egyedi elemek: API-k az új HTML-elemek definiálására Shadow (árnyék) DOM: beágyazott DOM (dokumentum objektum modell) és stílus összeállítással HTML-sablonok: HTML-töredékek amelyek nem jeleníthetőek meg, amíg a JavaScript nem példányosítja, addig tárolódnak.
Funkciók
Egyedi elemek Két részből állnak az egyéni elemek: autonóm egyéni elemek és testreszabott beépített elemek. Az autonóm egyéni elemek olyan HTML-elemek, amelyek teljesen elkülönülnek a natív HTML-elemektől; lényegében lentről felfelé épülnek a Custom Elements API segítségével. A testreszabott beépített elemek olyan elemek, amik a natív HTML-elemekre épülnek, hogy újra felhasználhassák a funkcionalitásukat.
Shadow (árnyék) DOM A shadow DOM egy olyan funkció, amely lehetővé teszi a webböngésző számára, hogy DOM-elemeket jelenítsen meg anélkül, hogy azokat a DOM-fába helyezné. Ez egyfajta gátat hoz létre; megszabja, hogy a fejlesztő és a böngésző mit érhet el: a fejlesztő nem férhet hozzá az árnyék DOM-hoz ugyanúgy, mint a beágyazott elemekkel, míg a böngésző ugyanúgy képes megjeleníteni és módosítani a kódot, mint a beágyazott elemekkel. Egy adott elem Shadow DOM-ján belül lefedett CSS hatása az, hogy a HTML-elemeket be lehet ágyazni anélkül, hogy a CSS-stílusok kiszivárognának, és olyan elemeket érintenének, amelyeket nem kellett volna befolyásolniuk. Bár ezek az elemek a HTML és a CSS vonatkozásában be vannak ágyazva, mégis képesek aktiválni azokat az eseményeket, amelyeket a dokumentum más elemei fel tudnak venni.
Az elem hatókörébe tartozó részfát árnyékfának (shadow tree) nevezzük. Az elemet, amelyhez az árnyékfa kapcsolódik, árnyékgazdának (shadow host) nevezzük.
A shadow DOM-nak mindig kapcsolódnia kell egy meglévő elemhez, akár szó szerinti elemként csatolva, akár scriptparancsok. A JavaScript-ben a Shadow DOM-elemet az Element.attachShadow() használatával csatolja egy elemhez.
A HTML és a CSS alkalmazási képessége elengedhetetlen az egyedi elemek létrehozásához. Ha nincs Shadow (árnyék) DOM, akkor a különböző külső egyéni elemek nem kívánt módon léphetnek kölcsönhatásba egymással.
HTML-sablon A HTML-sablon egy módja annak, hogy tetszés szerint elnevezett HTML-szakaszokat illesszen be. A HTML-sablonok szintaxisa a következőképpen néz ki:
<html> <template> <h1><slot name="cím"></slot></h1> <p><slot name="leírás"></slot></p> </template> </html>
A scriptek nem fognak lefutni és a sablonon belüli erőforrások nem lesznek beolvasva, amíg a sablon véget nem ér.
Böngészőtámogatás
A webkomponenseket minden nagyobb böngésző támogatja.
A régebbi böngészőkkel való kompatibilitás JavaScript-alapú polifillekkel valósul meg.
Könyvtárak Számos olyan könyvtár található, amelyek webkomponensekre épülnek azzal a céllal, hogy növeljék az absztrakció szintjét az egyedi elemek létrehozásakor. Néhány ilyen könyvtár: twoBirds, X-Tag, Slim.js, Polymer, Bosonic, Riot.js, Smart HTML Elements, Salesforce Lightning Web Components, és a DataFormsJS.
A fentebb felsoroltak közül a Bosonic, Polymer és DataFormsJS nyújtanak szabadon felhasználható előre elkészített komponenseket. Ezek az alkotóelemek felcserélhetők, mivel mindegyik nyílt webes technológiára épülnek.
Közösség Számos közösségi erőfeszítés van a webkomponensek ökoszisztémájával kapcsolatban. A WebComponents.org oldal egy olyan keresési felületet biztosít, ahol minden létező webkomponenst, egyedi elemek mindenhol megtalálható, illetve ellenőrzi, hogy a népszerű front-end keretek kompatibilisek-e a webkomponensek szabványos használatával, függőben lévő hibákkal és elérhető megoldásokkal. Ezenkívül a Vaadin oktatóanyagoknak van egy külön területe, amely megmutatja, hogy ezeket a megoldásokat hogyan használhatják fel hatékonyan; például demo alkalmazásokkal vagy hasonló témákkal kapcsolatosan.
Történet A webkomponenseket Alex Russell mutatta be először a Fronteers Konferencián 2011-ben.
Polimer, webkomponenseken alapuló könyvtárat adott ki Google 2013-ban.
A Firefox 63 webkomponenst engedélyezett alapértelmezésként, és frissítette a fejlesztői eszközöket 2018-ban, hogy ezeket támogassa.
Hivatkozások
További információk Webcomponents.org Open Web Components Can I Use? - Browser Support for Custom Elements Custom Elements Everywhere - Framework Support for Custom Elements Web Components specifications slim.js library Polymer-Project SmartJS Salesforce Lightning Web Components DataFormsJS
Kategória:Szabványok Kategória:Webfejlesztés