Webkomponenten

Nicht zu verwechseln mit HTML Components.

Webkomponenten sind eine Reihe von Funktionen, die ein Standardkomponentenmodell für das Web bieten[1] erlauben für Verkapselung und Interoperabilität von Individuum HTML -Elemente.

Zu den primären Technologien, die zum Erstellen verwendet werden, gehören:[2]

  • Benutzerdefinierte Elemente: APIs zum Definieren neuer HTML -Elemente
  • Shadow DOM: eingekapseltes DOM und Styling mit Komposition
  • HTML -Vorlagen: HTML[3]

Merkmale

Benutzerdefinierte Elemente

Zu den benutzerdefinierten Elementen gibt es zwei Teile: autonome benutzerdefinierte Elemente und maßgeschneiderte integrierte Elemente. Autonome benutzerdefinierte Elemente sind Html Elemente, die völlig von Native getrennt sind Html Elemente; Sie werden im Wesentlichen mit den benutzerdefinierten Elementen von unten nach oben gebaut API. Angepasste integrierte Elemente sind Elemente, die auf nativen HTML-Elementen basieren, um ihre Funktionalität wiederzuverwenden.[4]

Shadow Dom

Shadow Dom ist eine Funktionalität, die dem erlaubt Webbrowser zu rendern Dom Elemente, ohne sie in das Hauptdokument Dom Tree zu setzen. Dies schafft eine Barriere zwischen dem, was der Entwickler und der Browser erreichen können. Der Entwickler kann nicht auf das Shadow DOM auf die gleiche Weise zugreifen wie mit verschachtelten Elementen, während der Browser diesen Code genauso rendern und ändern kann wie mit verschachtelten Elementen. Der Einfluss von CSS im Schattendom eines bestimmten Elements ist das, das ist das Html Elemente können ohne das Risiko von eingekapselt werden CSS Lecker und beeinflussen Elemente, die sie nicht beeinflussen sollten. Obwohl diese Elemente in Bezug auf HTML und CSS eingekapselt sind, können sie dennoch Ereignisse abfeuern, die von anderen Elementen im Dokument aufgegriffen werden können.[5][6]

Der Scoped -Subtree in einem Element wird als Schattenbaum bezeichnet. Das Element, an das der Schattenbaum angebracht ist, wird als Schattenwirt bezeichnet.[6]

Shadow Dom muss immer mit einem vorhandenen Element verbunden sein, entweder durch das Anbringen als wörtliches Element oder durch Scripting. Im JavaScript, Schattendoms werden an ein Element angehängt Element.attachShadow ().[7]

HTML -Vorlage

Die HTML -Vorlage ist eine Möglichkeit, HTML -Stücke einzufügen, die nach Belieben gestempelt sind. Die Syntax von HTML -Vorlagen sieht folgt aus:

<html>  <Schablone>  <H1> <Slot Name="Titel"> </Slot> </H1>  <p> <Slot Name="Bezeichnung"> </Slot> </p>  Schablone> html>

Skripte werden nicht ausgeführt, und Ressourcen, die sich in einer Vorlage befinden, werden erst abgerufen, wenn die Vorlage gestempelt ist.[8]

Browserunterstützung

Webkomponenten werden durch aktuelle Versionen aller wichtigen Browser unterstützt.[9]

Die Rückwärtskompatibilität mit älteren Browsern wird mithilfe der Implementierung implementiert JavaScript-basierend Polyfills.

Bibliotheken

Es gibt viele Bibliotheken, die auf Webkomponenten basieren, um das Abstraktionsniveau beim Erstellen benutzerdefinierter Elemente zu erhöhen. Einige dieser Bibliotheken sind X-Tag, Slim.js, Polymer, Bosonisch, Riot.js, Salesforce Lightning -Webkomponenten, und DataFormsJs.

Bosonische, Polymer- und DataFormsJs bieten aus der obigen Liste fertige Komponenten, die kostenlos verwendet werden können. Diese Komponenten können austauschbar verwendet werden, da sie alle auf offenen Webtechnologien basieren.[10][Klarstellung erforderlich]

Gemeinschaft

Es gibt zahlreiche Community -Bemühungen für das Webkomponenten -Ökosystem. Webcomponents.org[11] Bietet eine Schnittstelle zur Suche nach vorhandenen Webkomponenten, benutzerdefinierte Elemente überall[12] Überprüfen Sie, ob beliebte Front-End-Frontworks kompatibel und bereit sind, Webkomponenten-Standard-Standards mit einer Reihe von Fehler und verfügbaren Problemumgehungen zu verwenden. Darüber hinaus sind Vaadin -Tutorials[13] hat einen speziellen Abschnitt, der zeigt, wie diese Problemumgehungen effizient mit Beispiel -Demo -Apps und ähnlich verwandten Themen verwendet werden.

Geschichte

Webkomponenten wurden zum ersten Mal von Alex Russell auf der Fronteers Conference 2011 eingeführt.[14]

Polymer, eine Bibliothek basierend auf Webkomponenten wurde von veröffentlicht von Google im Jahr 2013.[15]

Feuerfuchs 63 Aktivierte Webkomponenten unterstützen standardmäßig die Entwickler -Tools, um sie 2018 zu unterstützen.[16]

Verweise

  1. ^ GitHub - W3C/WebComponents: Webkomponentenspezifikationen., World Wide Web Consortium, 2019-01-03, abgerufen 2019-01-03
  2. ^ "Webkomponenten". MDN Web Docs. Abgerufen 2019-01-03.
  3. ^ "<Semplate>: Das Inhaltsvorlageelement". MDN Web Docs. Mozilla. Abgerufen 2018-07-08.
  4. ^ "Benutzerdefinierte Elemente". www.w3.org. Abgerufen 2016-12-01.
  5. ^ "Was zum Teufel ist Shadow Dom?". Dimitri Glazkov. 2011-01-15. Abgerufen 2016-12-01.
  6. ^ a b "Shadow DOM v1: in sich geschlossene Webkomponenten | Web | Google-Entwickler". Google -Entwickler. Abgerufen 2016-12-01.
  7. ^ "Shadow Dom". Mozilla Developer Network. Abgerufen 2016-12-01.
  8. ^ Gemeinschaft. "Einführung in die Vorlagenelemente - WebComponents.org". webcomponents.org. Abgerufen 2016-12-03.
  9. ^ "Webcomponents.org - Diskussion und Freigabe von Webkomponenten". www.webcomponents.org. Abgerufen 2020-07-22.
  10. ^ "Webkomponenten in der Produktion - sind wir schon da?". vaadin.com. Abgerufen 2016-11-21.
  11. ^ "Suchen Sie die verfügbaren Webkomponenten".
  12. ^ "Validieren Sie Front-End-Frameworks mit Webkomponenten Standard".
  13. ^ "Webkomponenten -Tutorials".
  14. ^ "Webkomponenten und modellgesteuerte Ansichten von Alex Russell · Fronteers". Fronteers.nl. Abgerufen 2016-12-02.
  15. ^ "Der Stand der Webkomponenten ★ Mozilla Hacks - Der Webentwickler -Blog". hacks.mozilla.org. Abgerufen 2016-12-02.
  16. ^ "Entwicklertools unterstützen Webkomponenten in Firefox 63".

Externe Links