Webové komponenty - Web Components
Webové komponenty jsou sada funkcí, které poskytují standardní model součásti pro web[1] umožňující zapouzdření a interoperabilita jednotlivce Prvky HTML.
Mezi jejich primární technologie patří:[2]
- Vlastní prvky: API k definování nových prvků HTML
- Shadow DOM: zapouzdřený DOM a styl, s kompozicí
- Šablony HTML: Fragmenty HTML, které se nevykreslují, ale ukládají se až do vytvoření instance pomocí JavaScriptu[3]
Funkce
Vlastní prvky
Vlastní prvky mají dvě části: autonomní vlastní prvky a přizpůsobené vestavěné prvky. Autonomní vlastní prvky jsou HTML prvky, které jsou zcela odděleny od nativních HTML elementy; jsou v zásadě vytvářeny zdola nahoru pomocí vlastních prvků API. Přizpůsobené předdefinované prvky jsou prvky, které jsou postaveny na nativních prvcích HTML k opětovnému použití jejich funkcí.[4]
Shadow DOM
Shadow DOM je funkce, která umožňuje webový prohlížeč vykreslit DOM prvky, aniž byste je vkládali do hlavního stromu DOM dokumentu. To vytváří bariéru mezi tím, čeho může vývojář a prohlížeč dosáhnout; vývojář nemůže přistupovat k Shadow DOM stejným způsobem jako s vnořenými prvky, zatímco prohlížeč může tento kód vykreslit a upravit stejným způsobem jako vnořené prvky. Dopad CSS zaměřeného na Shadow DOM konkrétního prvku je ten HTML prvky lze zapouzdřit bez rizika CSS styly prosakující a ovlivňující prvky, které neměly ovlivňovat. I když jsou tyto prvky zapouzdřeny s ohledem na HTML a CSS, mohou stále aktivovat události, které lze vyzvednout jinými prvky v dokumentu.[5][6]
Rozsah podstromu v prvku se nazývá stínový strom. Prvek, ke kterému je stínový strom připojen, se nazývá stínový hostitel.[6]
Shadow DOM musí být vždy připojen k existujícímu prvku, a to buď připojením jako doslovný prvek, nebo prostřednictvím skriptování. v JavaScript, připojíte Shadow DOM k prvku pomocí Element.attachShadow ().[7]
Schopnost rozsahu HTML a CSS je zásadní pro vytváření vlastních prvků. Pokud stínový DOM neexistoval, mohly by různé externí vlastní prvky interagovat nežádoucími způsoby.
Šablona HTML
Šablona HTML je způsob, jak vložit bloky HTML, které jsou označeny podle libosti. Syntaxe šablon HTML vypadá takto:
<html> <šablona> <h1><slot název="titul"></slot></h1> <str><slot název="popis"></slot></str> </šablona></html>Skripty se nespustí a prostředky, které jsou uvnitř šablony, nebudou načteny, dokud nebude šablona vyražena.[8]
Podpora prohlížeče
Webové komponenty podporují všechny hlavní prohlížeče[9].
Zpětná kompatibilita se staršími prohlížeči je implementována pomocí JavaScript -na základě polyfills.
Knihovny
Existuje několik knihoven, které jsou postaveny na webových komponentách s cílem zvýšit úroveň abstrakce při vytváření vlastních prvků. Některé z těchto knihoven jsou X-tag, Slim.js, Polymer, Bosonic, Riot.js, a Inteligentní prvky HTML.
Dva z nich, Bosonic a Polymer, poskytují hotové komponenty, které jsou zdarma k použití. Tyto komponenty lze používat zaměnitelně, protože jsou postaveny na otevřených webových technologiích.[10][je zapotřebí objasnění ]
Společenství
Existuje mnoho úsilí komunity o ekosystém webových komponent. WebComponents.org[11] poskytuje rozhraní pro vyhledávání všech existujících webových komponent, vlastních prvků kdekoli[12] ověřuje, zda jsou populární front-endové rámce kompatibilní a připravené k použití standardu Web Components, se sadou nevyřízených chyb a dostupných řešení. Navíc Vaadin Tutorials[13] má vyhrazenou část, která ukazuje, jak jsou tato zástupná řešení využívána efektivně s ukázkovými ukázkovými aplikacemi a podobně souvisejícími tématy.
Dějiny
Webové komponenty představil Alex Russell poprvé na konferenci Fronteers Conference 2011.[14]
Polymer, byla vydána knihovna založená na webových komponentách Google v roce 2013.[15]
Firefox 63 přidává podporu vývojářských nástrojů pro webové komponenty.[16]
Reference
- ^ GitHub - w3c / webcomponents: Specifikace webových komponent., World Wide Web Consortium, 2019-01-03, vyvoláno 2019-01-03
- ^ „Web Components“. Webové dokumenty MDN. Citováno 2019-01-03.
- ^ ": Prvek šablony obsahu". Webové dokumenty MDN. Mozilla. Citováno 2018-07-08.
- ^ „Vlastní prvky“. www.w3.org. Citováno 2016-12-01.
- ^ „Co je sakra stín DOM?“. Dimitri Glazkov. 2011-01-15. Citováno 2016-12-01.
- ^ A b "Shadow DOM v1: Samostatné webové komponenty | Web | Google Developers". Google Developers. Citováno 2016-12-01.
- ^ "Shadow DOM". Mozilla Developer Network. Citováno 2016-12-01.
- ^ Společenství. „Úvod do prvků šablony - WebComponents.org“. webcomponents.org. Citováno 2016-12-03.
- ^ „webcomponents.org - Diskutujte a sdílejte webové komponenty“. www.webcomponents.org. Citováno 2020-07-22.
- ^ „Webové komponenty v produkčním použití - jsme tam už?“. vaadin.com. Citováno 2016-11-21.
- ^ „Hledat dostupné webové komponenty“.
- ^ „Ověřit rozhraní front-end pomocí standardu Web Components“.
- ^ "Výuky webových komponent".
- ^ „Webové komponenty a pohledy řízené modelem od Alexa Russella · Fronteers“. fronteers.nl. Citováno 2016-12-02.
- ^ „Stav webových komponent ★ Mozilla Hacks - blog vývojářů webu“. hacks.mozilla.org. Citováno 2016-12-02.
- ^ „Podpora vývojových nástrojů pro webové komponenty ve Firefoxu 63“.