Web Components

Konzepte und Verwendung

Als Entwickler wissen wir alle, dass es eine gute Idee ist, Code so oft wie möglich wiederzuverwenden. Traditionell war dies bei benutzerdefinierten Markup-Strukturen nicht so einfach — denken Sie an das komplexe HTML (sowie die zugehörigen Stile und Skripte), das Sie manchmal schreiben mussten, um benutzerdefinierte UI-Elemente zu rendieren, und wie die mehrfache Verwendung dieser Elemente Ihre Seite in ein Chaos verwandeln kann, wenn Sie nicht vorsichtig sind.

Web Components zielt darauf ab, solche Probleme zu lösen — es besteht aus drei Haupttechnologien, die zusammen verwendet werden können, um vielseitige benutzerdefinierte Elemente mit gekapselter Funktionalität zu erstellen, die problemlos überall wiederverwendet werden können, ohne Angst vor Codekollisionen zu haben.

Benutzerdefinierte Elemente

Eine Reihe von JavaScript-APIs, die es Ihnen ermöglichen, benutzerdefinierte Elemente und deren Verhalten zu definieren, die dann wie gewünscht in Ihrer Benutzeroberfläche verwendet werden können.

Shadow DOM

Eine Reihe von JavaScript-APIs zum Anhängen eines gekapselten "Shadow"-DOM-Baums an ein Element — das getrennt vom Hauptdokument-DOM gerendert wird — und zur Steuerung der zugehörigen Funktionalität. Auf diese Weise können Sie die Funktionen eines Elements privat halten, sodass sie geskriptet und gestylt werden können, ohne die Angst vor Kollisionen mit anderen Teilen des Dokuments.

HTML-Vorlagen

Die <template>- und <slot>-Elemente ermöglichen es Ihnen, Markup-Vorlagen zu schreiben, die nicht auf der gerenderten Seite angezeigt werden. Diese können dann mehrfach als Grundlage für die Struktur eines benutzerdefinierten Elements wiederverwendet werden.

Der grundlegende Ansatz zur Implementierung eines Web-Components sieht im Allgemeinen etwa so aus:

1. Erstellen Sie eine Klasse, in der Sie die Funktionalität Ihres Web-Components mit der class-Syntax angeben.
2. Registrieren Sie Ihr neues benutzerdefiniertes Element mithilfe der Methode CustomElementRegistry.define(), indem Sie den zu definierenden Elementnamen, die Klasse oder Funktion, in der die Funktionalität angegeben ist, und optional das zu ererbende Element übergeben.
3. Falls erforderlich, hängen Sie ein Shadow DOM an das benutzerdefinierte Element mithilfe der Methode Element.attachShadow(). Fügen Sie dem Shadow DOM mit regulären DOM-Methoden untergeordnete Elemente, Event-Listener usw. hinzu.
4. Falls erforderlich, definieren Sie eine HTML-Vorlage mit <template> und <slot>. Verwenden Sie erneut reguläre DOM-Methoden, um die Vorlage zu klonen und an Ihr Shadow DOM anzuhängen.
5. Verwenden Sie Ihr benutzerdefiniertes Element überall auf Ihrer Seite, genau wie Sie es mit einem regulären HTML-Element tun würden.

Leitfäden

Verwendung von benutzerdefinierten Elementen

Ein Leitfaden, der zeigt, wie man die Funktionen von benutzerdefinierten Elementen verwendet, um einfache Web-Components zu erstellen, sowie Lifecycle-Callbacks und einige andere fortgeschrittenere Funktionen betrachtet.

Verwendung von Shadow DOM

Ein Leitfaden, der die Grundlagen des Shadow DOM betrachtet und zeigt, wie man ein Shadow DOM an ein Element anhängt, dem Shadow DOM-Baum hinzufügt, es stylt und mehr.

Verwendung von Vorlagen und Slots

Ein Leitfaden, der zeigt, wie man eine wiederverwendbare HTML-Struktur mit den <template> und <slot>-Elementen definiert und diese Struktur dann in Ihren Web-Components verwendet.

Referenz

Benutzerdefinierte Elemente

CustomElementRegistry

Enthält Funktionalitäten im Zusammenhang mit benutzerdefinierten Elementen, insbesondere die Methode CustomElementRegistry.define(), die verwendet wird, um neue benutzerdefinierte Elemente zu registrieren, damit sie dann in Ihrem Dokument verwendet werden können.

Window.customElements

Gibt eine Referenz auf das CustomElementRegistry-Objekt zurück.

Lifecycle-Callbacks

Spezielle Callback-Funktionen, die innerhalb der Klassendefinition des benutzerdefinierten Elements definiert sind und sein Verhalten beeinflussen:

connectedCallback()

Wird aufgerufen, wenn das benutzerdefinierte Element zum ersten Mal mit dem DOM des Dokuments verbunden wird.

disconnectedCallback()

Wird aufgerufen, wenn das benutzerdefinierte Element vom DOM des Dokuments getrennt wird.

adoptedCallback()

Wird aufgerufen, wenn das benutzerdefinierte Element in ein neues Dokument verschoben wird.

attributeChangedCallback()

Wird aufgerufen, wenn eines der Attribute des benutzerdefinierten Elements hinzugefügt, entfernt oder geändert wird.

Erweiterungen zur Erstellung angepasster eingebauter Elemente

Die folgenden Erweiterungen sind definiert:

Das is globale HTML-Attribut

Ermöglicht es Ihnen anzugeben, dass ein standardmäßiges HTML-Element wie ein registriertes angepasstes eingebautes Element funktionieren soll.

Die "is"-Option der Methode Document.createElement()

Ermöglicht es Ihnen, eine Instanz eines standardmäßigen HTML-Elements zu erstellen, die wie ein gegebenes registriertes angepasstes eingebautes Element funktioniert.

CSS-Pseudoklassen

Pseudoklassen, die sich speziell auf benutzerdefinierte Elemente beziehen:

:defined

Passt auf jedes definierte Element, einschließlich eingebauter Elemente und benutzerdefinierter Elemente, die mit CustomElementRegistry.define() definiert wurden.

:host

Selektiert den Schatten-Host des Shadow DOM, das die CSS enthält, die darin verwendet wird.

:host()

Selektiert den Schatten-Host des Shadow DOM, das die CSS enthält, die darin verwendet wird (damit Sie ein benutzerdefiniertes Element von seinem Shadow DOM aus auswählen können) — aber nur, wenn der als Parameter der Funktion angegebene Selektor mit dem Schatten-Host übereinstimmt.

:host-context()

Selektiert den Schatten-Host des Shadow DOM, das die CSS enthält, die darin verwendet wird (damit Sie ein benutzerdefiniertes Element von seinem Shadow DOM aus auswählen können) — aber nur, wenn der als Parameter der Funktion angegebene Selektor mit dem Vorfahren des Schatten-Hosts im DOM-Hierarchieplatz übereinstimmt.

:state()

Passt auf benutzerdefinierte Elemente, die sich in einem angegebenen benutzerdefinierten Zustand befinden. Genauer gesagt passt es auf anonyme benutzerdefinierte Elemente, bei denen der angegebene Zustand im CustomStateSet des Elements vorhanden ist.

CSS-Pseudoelemente

Pseudoelemente, die sich speziell auf benutzerdefinierte Elemente beziehen:

::part

Stellt jedes Element innerhalb eines Shadow Tree dar, das ein übereinstimmendes part Attribut hat.

Shadow DOM

ShadowRoot

Stellt die Wurzelknoten eines Shadow DOM-Unterbaums dar.

Element-Erweiterungen

Erweiterungen der Element-Schnittstelle im Zusammenhang mit Shadow DOM:

• Die Methode Element.attachShadow() hängt einen Shadow DOM-Baum an das spezifizierte Element an.
• Die Eigenschaft Element.shadowRoot gibt die am spezifizierten Element angehängte Schattenwurzel zurück oder null, wenn keine Schattenwurzel angehängt ist.

Relevante Ergänzungen der Node-Schnittstelle

Ergänzungen zur Node-Schnittstelle im Zusammenhang mit Shadow DOM:

• Die Methode Node.getRootNode() gibt die Wurzel des Kontextobjekts zurück, die optional die Schattenwurzel einschließt, wenn diese verfügbar ist.
• Die Eigenschaft Node.isConnected gibt einen booleschen Wert zurück, der angibt, ob der Knoten an das Kontextobjekt, z.B. das Document-Objekt im Fall des normalen DOM oder die ShadowRoot im Fall eines Shadow DOM, direkt oder indirekt angeschlossen ist.

Erweiterungen der Event-Schnittstelle

Erweiterungen der Event-Schnittstelle im Zusammenhang mit Shadow DOM:

Event.composed

Gibt true zurück, wenn das Ereignis die Shadow DOM-Grenze in das Standard-DOM hinein überqueren wird, andernfalls false.

Event.composedPath

Gibt den Pfad des Ereignisses zurück (Objekte, auf denen Listener aufgerufen werden). Dies schließt keine Knoten in Shadow Trees ein, wenn die Schattenwurzel mit ShadowRoot.mode geschlossen erstellt wurde.

HTML-Vorlagen

<template>

Enthält ein HTML-Fragment, das nicht gerendert wird, wenn ein enthaltendes Dokument zunächst geladen wird, aber zur Laufzeit mit JavaScript angezeigt werden kann, hauptsächlich als Grundlage für benutzerdefinierte Elementstrukturen verwendet. Die zugehörige DOM-Schnittstelle ist HTMLTemplateElement.

<slot>

Eine Platzhalter innerhalb eines Web-Components, die Sie mit Ihrem eigenen Markup füllen können und es Ihnen ermöglicht, separate DOM-Bäume zu erstellen und zusammen darzustellen. Die zugehörige DOM-Schnittstelle ist HTMLSlotElement.

Das globale HTML-Attribut slot

Weist einem Element in einem Shadow DOM-Schattenbaum einen Slot zu.

Element.assignedSlot

Ein schreibgeschütztes Attribut, das eine Referenz auf den <slot> zurückgibt, in den dieses Element eingesetzt ist.

Text.assignedSlot

Ein schreibgeschütztes Attribut, das eine Referenz auf den <slot> zurückgibt, in den dieser Textknoten eingesetzt ist.

Erweiterungen der Element-Schnittstelle

Erweiterungen der Element-Schnittstelle im Zusammenhang mit Slots:

Element.slot

Gibt den Namen des Schatten-DOM-Slots zurück, der dem Element zugeordnet ist.

CSS-Pseudoelemente

Pseudoelemente, die sich speziell auf Slots beziehen:

::slotted

Passt auf jeden Inhalt, der in einen Slot eingesetzt wird.

Das slotchange-Ereignis

Wird auf einer Instanz eines HTMLSlotElement (<slot>-Element) ausgelöst, wenn die in diesem Slot enthaltenen Knoten geändert werden.

Beispiele

Wir bauen eine Reihe von Beispielen in unserem web-components-examples GitHub-Repo auf. Weitere werden im Laufe der Zeit hinzugefügt.

Spezifikationen

Browser-Kompatibilität

html.elements.template

api.ShadowRoot