Webkomponensek
A webkomponensek olyan funkciók, amelyek szabványos komponensmodellt biztosítanak az interneten,[1] 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:[2]
- 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[3] nem példányosítja, addig tárolódnak.
Funkciók[szerkesztés]
Egyedi elemek[szerkesztés]
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.[4]
Shadow (árnyék) DOM[szerkesztés]
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.[5][6]
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.[6]
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.[7]
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[szerkesztés]
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.[8]
Böngészőtámogatás[szerkesztés]
A webkomponenseket minden nagyobb böngésző támogatja.[9]
A régebbi böngészőkkel való kompatibilitás JavaScript-alapú polifillekkel valósul meg.
Könyvtárak[szerkesztés]
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.[10]
Közösség[szerkesztés]
Számos közösségi erőfeszítés van a webkomponensek ökoszisztémájával kapcsolatban. A WebComponents.org[11] oldal egy olyan keresési felületet biztosít, ahol minden létező webkomponenst, egyedi elemek mindenhol[12] 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[13] 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[szerkesztés]
A webkomponenseket Alex Russell mutatta be először a Fronteers Konferencián 2011-ben.[14]
Polimer, webkomponenseken alapuló könyvtárat adott ki Google 2013-ban.[15]
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.[16]
Hivatkozások[szerkesztés]
- ↑ GitHub - w3c/webcomponents: Web Components specifications., World Wide Web Consortium, 2019-01-03, <https://github.com/w3c/webcomponents>. Hozzáférés ideje: 2019-01-03
- ↑ Web Components. MDN Web Docs . (Hozzáférés: 2019. január 3.)
- ↑ <template>: The Content Template element. MDN Web Docs . Mozilla. (Hozzáférés: 2018. július 8.)
- ↑ Custom Elements. www.w3.org . (Hozzáférés: 2016. december 1.)
- ↑ What the Heck is Shadow DOM?. Dimitri Glazkov , 2011. január 15. (Hozzáférés: 2016. december 1.)
- ↑ a b Shadow DOM v1: Self-Contained Web Components | Web | Google Developers. Google Developers . (Hozzáférés: 2016. december 1.)
- ↑ Shadow DOM. Mozilla Developer Network . (Hozzáférés: 2016. december 1.)
- ↑ Community: Introduction to the template elements — WebComponents.org. webcomponents.org . (Hozzáférés: 2016. december 3.)
- ↑ webcomponents.org - Discuss & share web components (amerikai angol nyelven). www.webcomponents.org . (Hozzáférés: 2020. július 22.)
- ↑ Web Components in production use – are we there yet?. vaadin.com . (Hozzáférés: 2016. november 21.)
- ↑ Search available Web Components
- ↑ Validate Front-end Frameworks with Web Components Standard
- ↑ Web Components Tutorials
- ↑ Web Components and Model Driven Views by Alex Russell · Fronteers. fronteers.nl . (Hozzáférés: 2016. december 2.)
- ↑ The state of Web Components ★ Mozilla Hacks – the Web developer blog. hacks.mozilla.org . (Hozzáférés: 2016. december 2.)
- ↑ Developer Tools support for Web Components in Firefox 63