Web Components ist eine Suite verschiedener Technologien, die es Ihnen ermöglichen, wiederverwendbare benutzerdefinierte Elemente zu erstellen — mit Funktionalität, die vom Rest Ihres Codes gekapselt ist — und diese in Ihren Webanwendungen zu verwenden.

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 derclass-Syntax angeben.
2. Registrieren Sie Ihr neues benutzerdefiniertes Element mithilfe der MethodeCustomElementRegistry.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 MethodeElement.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 MethodeCustomElementRegistry.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 dasCustomElementRegistry-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:

Dasis 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 MethodeDocument.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 mitCustomElementRegistry.define() definiert wurden.

:host

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

:host()

Selektiert den Schatten-Host desShadow 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 desShadow 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 imCustomStateSet des Elements vorhanden ist.

CSS-Pseudoelemente

Pseudoelemente, die sich speziell auf benutzerdefinierte Elemente beziehen:

::part

Stellt jedes Element innerhalb einesShadow Tree dar, das ein übereinstimmendespart Attribut hat.

Shadow DOM

ShadowRoot

Stellt die Wurzelknoten eines Shadow DOM-Unterbaums dar.

Element-Erweiterungen

Erweiterungen derElement-Schnittstelle im Zusammenhang mit Shadow DOM:

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

Relevante Ergänzungen derNode-Schnittstelle

Ergänzungen zurNode-Schnittstelle im Zusammenhang mit Shadow DOM:

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

Erweiterungen derEvent-Schnittstelle

Erweiterungen derEvent-Schnittstelle im Zusammenhang mit Shadow DOM:

Event.composed

Gibttrue zurück, wenn das Ereignis die Shadow DOM-Grenze in das Standard-DOM hinein überqueren wird, andernfallsfalse.

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 mitShadowRoot.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 istHTMLTemplateElement.

<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 istHTMLSlotElement.

Das globale HTML-Attributslot

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 derElement-Schnittstelle

Erweiterungen derElement-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.

Dasslotchange-Ereignis

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

Beispiele

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

Spezifikationen

Browser-Kompatibilität

html.elements.template

api.ShadowRoot