Ugrás a tartalomhoz

Webkomponensek

Ellenőrzött
A Wikipédiából, a szabad enciklopédiából
Nem tévesztendő össze a következővel: HTML-elem.

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]
  1. ↑ 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
  2. ↑ Web Components. MDN Web Docs . (Hozzáférés: 2019. január 3.)
  3. ↑ <template>: The Content Template element. MDN Web Docs . Mozilla. (Hozzáférés: 2018. július 8.)
  4. ↑ Custom Elements. www.w3.org . (Hozzáférés: 2016. december 1.)
  5. ↑ What the Heck is Shadow DOM?. Dimitri Glazkov , 2011. január 15. (Hozzáférés: 2016. december 1.)
  6. ↑ a b Shadow DOM v1: Self-Contained Web Components | Web | Google Developers. Google Developers . (Hozzáférés: 2016. december 1.)
  7. ↑ Shadow DOM. Mozilla Developer Network . (Hozzáférés: 2016. december 1.)
  8. ↑ Community: Introduction to the template elements — WebComponents.org. webcomponents.org . (Hozzáférés: 2016. december 3.)
  9. ↑ webcomponents.org - Discuss & share web components (amerikai angol nyelven). www.webcomponents.org . (Hozzáférés: 2020. július 22.)
  10. ↑ Web Components in production use – are we there yet?. vaadin.com . (Hozzáférés: 2016. november 21.)
  11. ↑ Search available Web Components
  12. ↑ Validate Front-end Frameworks with Web Components Standard
  13. ↑ Web Components Tutorials
  14. ↑ Web Components and Model Driven Views by Alex Russell · Fronteers. fronteers.nl . (Hozzáférés: 2016. december 2.)
  15. ↑ The state of Web Components ★ Mozilla Hacks – the Web developer blog. hacks.mozilla.org . (Hozzáférés: 2016. december 2.)
  16. ↑ Developer Tools support for Web Components in Firefox 63

További információk

[szerkesztés]

A lap eredeti címe: „https://hu.wikipedia.org/w/index.php?title=Webkomponensek&oldid=27597506”