Web Components

Webkomponenten sind eine Gruppe von Web-Technologien, die es ermöglichen, benutzerdefinierte, wiederverwendbare HTML Elemente zu erstellen, deren Funktionalität gekapselt ist und damit vollständig getrennt von anderem Code.

Konzept und Anwendung

Unter Softwareentwicklern ist allgemein anerkannt, Code weitestgehend wiederzuverwenden. Für benutzerdefinierte Markup-Strukturen war dies bekanntermaßen nicht ganz so einfach. Denken Sie nur an das komplexe HTML- (sowie CSS- und Skript-)Konglomerat, das teilweise notwendig war, um benutzerdefinierte UI-Steuerelemente zu erstellen; und wie die mehrfache Verwendung derartiger benutzerdefinierter Elemente auf einer Seite zu einem völlig undurchsichtigen Wirrwar führen kann, wenn man nicht äußerst sorgfältig vorgeht.

Webkomponenten zielen darauf ab, diese Probleme zu lösen. Bestehend aus drei Haupttechnologien, die gemeinsam eingesetzt werden können, um unterschiedliche und vielseitige benutzerdefinierte Elemente mit in sich gekapselter Funktionalität zu erstellen, die beliebig oft wiederverwendet werden können, ohne befürchten zu müssen, dass unterschiedlicher Code sich gegenseitig beeinflusst oder stört:

  • Benutzerdefinierte Elemente: Ein Satz von JavaScript APIs, die es ermöglichen, benutzerdefinierte Elemente sowie deren Verhalten zu definieren, die dann anschließend beliebig auf Ihrer Benutzeroberfläche verwendet werden können.
  • Shadow DOM: Ein Satz von JavaScript APIs, um einen Baum aus darin gekapselten "Schatten"-DOM-Elementen an ein Element anzufügen, der unabhängig vom DOM des Hauptdokuments gerendert wird, sowie um die dazugehörige Funktionalität zu steuern. Mit Hilfe dieser Technologie verbleiben die Ausprägungen solcher Elemente privat, sodass Skripte und Styles auf sie angewendet werden können, ohne dass sie mit anderen Teilen des Dokuments kollidieren.
  • HTML-Vorlagen: Die <template>- und <slot>-Elemente gestatten es, Markup-Vorlagen zu schreiben, die nicht auf der dargestellten Seite abgebildet werden. Diese können dann als Grundlage für benutzerdefinierte Elemente mehrere Male wiederverwendet werden.

Die grundsätzliche Herangehensweise für das Implementieren einer Webkomponente sieht im Allgemeinen so aus:

  1. Erstellen einer Klasse oder einer Funktion, in der die Funktionalität der Webkomponente festgelegt wird. Falls Sie hierzu eine Klasse einsetzen, dann verwenden Sie die ECMAScript 2015-Syntax (siehe auch Klassen).
  2. Registrieren des neuen benutzerdefinierten Elements mithilfe der CustomElementRegistry.define()-Methode. Dieser Methode werden der zu definierende Elementname, die Klasse bzw. Funktion, in der die Funktionalität definiert ist, sowie optional das Element, von dem das neue benutzerdefinierte Element erbt, übergeben.
  3. Falls erforderlich: Anfügen eines Schatten-DOMs zum benutzerdefinierten Element mithilfe der Element.attachShadow()-Methode. Kindelemente, Ereignisbehandlungsroutinen usw. werden dem Schatten-DOM unter Verwendung der üblichen DOM-Methoden hinzugefügt.
  4. Falls erforderlich: Definieren einer HTML-Vorlage mithilfe von <template> und <slot>. Auch hier werden die üblichen DOM-Methoden verwendet, um die HTML-Vorlage anschließend zu kopieren und zum Schatten-DOM hinzuzufügen.
  5. Das so geschaffene benutzerdefinierte Element kann überall auf der Seite eingefügt werden — ebenso wie ein normales HTML-Element.

Übungen

Benutzerdefinierte Elemente
Zeigt, wie benutzerdefinierte Elemente eingesetzt werden können, um einfache Webkomponenten zu erzeugen, die Rückruffunktionen (Callbacks) innerhalb des Lebenszyklus' einer Webkomponente, sowie einige weitere, fortgeschrittene Bestandteile benutzerdefinierter Elemente.
Schatten-DOM
Wirft einen Blick auf die Grundlagen des Schatten-DOMs: Wie ein Schatten-DOM an ein Element angefügt wird, wie Elemente zum Baum des Schatten-DOMs hinzugefügt werden, wie Stile auf sie angewendet werden, und weiteres mehr.
Vorlagen und Einschübe
Zeigt, wie eine wiederverwendbare HTML-Struktur mithilfe der <template> und <slot>-Elemente definiert und diese Struktur anschließend innerhalb von Webkomponenten eingesetzt wird.

Referenz

Benutzerdefinierte Elemente

CustomElementRegistry
Beinhaltet Methoden in Bezug auf benutzerdefinierte Elemente, insbesondere die CustomElementRegistry.define()-Methode, die zum Registrieren neuer benutzerdefinierter Elemente verwendet wird, damit sie in einem Dokument verwendet werden können.
Window.customElements
Liefert eine Referenz auf ein CustomElementRegistry-Objekt.
Rückruffunktionen innerhalb des Lebenszyklus
Spezielle Callback-Funktionen, die innerhalb der Klasse des benutzerdefinierten Steuerelements definiert sind und dessen Verhalten steuern:
  • connectedCallback: Wird aufgerufen, wenn das benutzerdefinierte Element mit dem DOM des Dokuments verbunden ist.
  • disconnectedCallback: Wird aufgerufen, wenn das benutzerdefinierte Element vom DOM des Dokuments abgetrennt wird.
  • adoptedCallback: Wird aufgerufen, wenn das benutzerdefinierte Element zu einem neuen Dokument verschoben wird.
  • attributeChangedCallback: Wird aufgerufen, wenn eines der Attribute des benutzerdefinierten Elements hinzugefügt, gelöscht oder verändert wird.
Erweiterungen, um benutzerdefinierte eingebaute Elemente zu erzeugen
  • Das globale is-Attribut dient dazu, ein Standard-HTML-Element anzugeben, das sich wie ein benutzerdefiniertes Element verhalten soll.
  • Die "is"-Option der Document.createElement()-Methode dient dazu, eine Instanz eines zuvor registrierten benutzerdefinierten Standard-HTML-Elements zu erzeugen.
CSS Pseudoklassen
Pseudoklassen, die sich speziell auf benutzerdefinierte Elemente beziehen:
  • :defined: Trifft auf jedes definierte Element zu, einschließlich eingebauter und benutzerdefinierter Elemente, die mithilfe von CustomElementRegistry.define() definiert sind.
  • :host: Wählt das jeweilige Container-Element des Schatten-DOMs, auf das die jeweilige CSS-Regel angewendet wird.
  • :host(): Wählt das Container-Element des Schatten-DOMs, auf das die jeweilige CSS-Regel angewendet wird — aber nur dann, wenn der Selektor, der als Funktionsargument übergeben wird, auf das jeweilige Container-Element passt.
  • :host-context(): Wählt das Container-Element des Schatten-DOMs, auf das die jeweilige CSS-Regel angewendet wird — aber nur dann, wenn der Selektor, der als Funktionsargument übergeben wird, auf die dem jeweiligen Container-Element übergeordnete Hierarchie innerhalb des DOMs passt.

Schatten-DOM

ShadowRoot
Repräsentiert die Wurzel-Node eines Schatten-DOM-Baums.
DocumentOrShadowRoot
Ein Mixin, das diejenigen Merkmale definiert, die sowohl in einem Dokument als auch in der Wurzel-Node eines Schatten-DOM-Baums verfügbar sind.
Element-Erweiterungen
Erweiterungen zur Element-Schnittstelle, die sich auf das Schatten-DOM beziehen:
Wichtige Node-Erweiterungen
Erweiterung zur Node-Schnittstelle, die sich auf das Schatten-DOM beziehen:
  • Die Node.getRootNode()-Methode liefert die Wurzel-Node des Kontextobjekts, die optional auch die Wurzel-Node des Schatten-DOM-Baums enthält, sofern verfügbar.
  • Die Node.isConnected-Eigenschaft liefert einen booleschen Wert, der angibt, ob eine Node (direkt oder indirekt) mit dem Kontextobjekt verbunden ist oder nicht. Dies ist beispielsweise das Document-Objekt im Falle eines normalen DOMs bzw. das ShadowRoot-Objekt im Falle eines Schatten-DOMs.
Event-Erweiterungen
Erweiterungen der Event-Schnittstelle, die sich auf das Schatten-DOM beziehen:
  • Event.composed: Liefert einen booleschen Wert, der angibt, ob ein Ereignis sich vom Schatten-DOM in das normale DOM fortsetzt (true), oder nicht (false).
  • Event.composedPath: Liefert den Pfad des Ereignisses (Objekte, deren Ereignisbehandlungsroutinen aufgerufen werden). Ausgeschlossen hiervon sind Nodes in Schatten-DOM-Bäumen, wenn die Wurzel-Node des Schatten-DOM-Baums mit ShadowRoot.mode = "closed" erstellt wurde.

HTML-Vorlagen

<template>
Beinhaltet ein HTML-Fragment, das nicht dargestellt wird, wenn das beinhaltende Dokument geladen wird. Es kann aber zur Laufzeit mit Hilfe von JavaScript angezeigt werden. Es wird hauptsächlich als Grundstruktur für benutzerdefinierte Elemente verwendet. Die dazugehörige DOM-Schnittstelle lautet: HTMLTemplateElement.
<slot>
Ein Platzhalter innerhalb einer Webkomponente, die mit benutzerdefiniertem Markup gefüllt werden kann. Auf diese Weise lassen sich unterschiedliche DOM-Fragmente mit der gleichen HTML-Vorlage erstellen, die alle gemeinsam dargestellt werden können. Die dazugehörige DOM-Schnittstelle lautet: HTMLSlotElement.
Das globale slot HTML-Attribut
Weist einem Element einen Einschub innerhalb eines Schatten-DOM-Baums zu.
Slotable
Ein Mixin, das sowohl von Element- als auch Text-Nodes implementiert wird. Es definiert Methoden, die es den jeweiligen Nodes erlauben, Inhalt eines <slot>-Elements zu werden. Das Mixin definiert ein Attribute: Slotable.assignedSlot, das eine Referenz auf den Einschub liefert, in den die Node eingefügt wurde.
Element-Erweiterungen
Erweiterungen der Element-Schnittstelle, die sich auf Einschübe beziehen:
  • Element.slot: Liefert den Namen des Einschubs, der dem Element hinzugefügt wurde.
CSS Pseudoelemente
Pseudoelemente, die sich speziell auf Einschübe beziehen:
  • ::slotted: Trifft auf jeden Inhalt zu, der einem Einschub hinzugefügt wurde.
Das slotchange-Ereignis
Wird auf einer HTMLSlotElement-Instanz (<slot>-Element) ausgelöst, wenn die Node(s), die sich im Einschub befinden, verändern.

Beispiele

Sie finden eine Reihe von Beispielen in unserem web-components-examples GitHub-Repository. Diesem Repository werden über die Zeit weitere Beispiele hinzugefügt.

Spezifikationen

Spezifikation Status Kommentar
HTML Living Standard
Die Definition von '<template> element' in dieser Spezifikation.
Lebender Standard Definition von <template>.
HTML Living Standard
Die Definition von '<slot> element' in dieser Spezifikation.
Lebender Standard Definition von <slot>.
HTML Living Standard
Die Definition von 'custom elements' in dieser Spezifikation.
Lebender Standard Definition von benutzerdefinierten HTML Elementen.
DOM
Die Definition von 'shadow trees' in dieser Spezifikation.
Lebender Standard Definition des Schatten-DOMs.
HTML Imports Arbeitsentwurf Erste HTML Importe-Definition.
Shadow DOM Veraltet Erste Schatten-DOM-Definition.

Browserkompatibilität

Grundsätzlich:

  • Webkomponenten werden standardmäßig von Firefox (ab Version 63), Chrome, und Opera unterstützt.
  • Safari unterstützts eine Reihe von Merkmalen von Webkomponenten, aber weniger als die oben genannten Browser.
  • Edge arbeitet an einer Implementation.

Um detaillierte Informationen zur Unterstützung spezifischer Merkmale einzelner Browser zu erhalten, ziehen sie bitte die oben genannten Referenzdokumente zu Rate.

Siehe auch

  • webcomponents.org — Website, die Beispiele, Übungen und weiterführende Informationen zu Webkomponenten bietet.
  • Hybrids — Open-Source Webkomponenten-Bibliothek, die simple Objekte und reine Funktionen der class und this Syntax vorzieht. Die Bibliothek bietet eine einfache, funktionale API, um benutzerdefinierte Elemente zu erzeugen.
  • Polymer — Googles Webkomponenten-Framework — eine Sammlung von Polyfills, Erweiterungen und Beispielen. Dieses Framework ist aktuell der einfachste Weg, Webkomponenten browserübergreifend einzusetzen.
  • Snuggsi.es — Einfacher Zugriff auf Webkomponenten in ~1kB, inklusive Polyfill — Alles, was Sie benötigen, ist ein Browser und ein grundsätzliches Verständnis von HTML, CSS und JavaScript Klassen, um zu starten.
  • Slim.js — Open-Source Webkomponenten-Bibliothek — eine hochperformante Bibliothek, um schnell und einfach Komponenten zu erstellen. Durch Plug-ins erweiterbar und Cross-Framework-kompatibel.
  • Smart.js — Webkomponenten-Bibliothek mit einer einfachen API, um browserübergreifend benutzerdefinierte Elemente zu erstellen.