Web Components

Konzepte und Verwendung

Als Entwickler wissen wir alle, dass das Wiederverwenden von Code so gut wie möglich eine gute Idee ist. Dies war traditionell für benutzerdefinierte Markup-Strukturen nicht so einfach – denken Sie an das komplexe HTML (und die zugehörigen Stil- und Skriptdateien), die Sie manchmal schreiben mussten, um benutzerdefinierte UI-Kontrollen darzustellen, und wie deren mehrfache Nutzung Ihre Seite zu einem Chaos machen 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 überall wiederverwendet werden können, ohne Angst vor Code-Kollisionen.

Custom elements

Eine Reihe von JavaScript-APIs, die es Ihnen ermöglichen, benutzerdefinierte Elemente und deren Verhalten zu definieren, die dann nach Belieben 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 – welches separat vom Hauptdokument-DOM gerendert wird – und zum Steuern der damit verbundenen Funktionalität. Auf diese Weise können Sie die Funktionen eines Elements privat halten, sodass sie skriptiert und gestylt werden können, ohne die Gefahr von Kollisionen mit anderen Teilen des Dokuments.

HTML Templates

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 normalerweise folgendermaßen aus:

1. Erstellen Sie eine Klasse, in der Sie die Funktionalität Ihres Web-Components angeben, unter Verwendung der class-Syntax.
2. Registrieren Sie Ihr neues benutzerdefiniertes Element mit der Methode CustomElementRegistry.define(), indem Sie den zu definierenden Elementnamen, die Klasse oder Funktion, in der dessen Funktionalität angegeben ist, und optional, von welchem Element es erbt, übergeben. Sie können im globalen Register über Window.customElements oder einem skalierten Register erstellen, um Namenskonflikte zwischen Komponenten zu vermeiden, indem Sie den CustomElementRegistry()-Konstruktor verwenden.
3. Falls erforderlich, anheften eines Shadow DOM an das benutzerdefinierte Element mit der Methode Element.attachShadow(). Fügen Sie Kindelemente, Ereignislistener usw. dem Shadow DOM hinzu, indem Sie reguläre DOM-Methoden verwenden.
4. Falls erforderlich, definieren Sie ein HTML-Template mit <template> und <slot>. Verwenden Sie erneut reguläre DOM-Methoden, um das Template zu klonen und es Ihrem Shadow DOM anzuheften.
5. Verwenden Sie Ihr benutzerdefiniertes Element, wo immer Sie möchten auf Ihrer Seite, genau wie Sie jedes reguläre HTML-Element verwenden würden.

Leitfäden

Using custom elements

Ein Leitfaden, der zeigt, wie Sie die Funktionen benutzerdefinierter Elemente nutzen können, um einfache Web-Components zu erstellen, sowie ein Blick auf Lebenszyklus-Callbacks und einige andere fortgeschrittene Funktionen.

Using shadow DOM

Ein Leitfaden, der die Grundlagen von Shadow DOM behandelt und zeigt, wie man einem Element ein Shadow DOM anfügt, den Shadow DOM-Baum ergänzt, ihn gestaltet und mehr.

Using templates and slots

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

Referenz

Custom elements

CustomElementRegistry

Enthält Funktionen, die mit benutzerdefinierten Elementen zu tun haben, besonders die Methode CustomElementRegistry.define(), die zur Registrierung neuer benutzerdefinierter Elemente verwendet wird, damit diese dann in Ihrem Dokument verwendet werden können. Der CustomElementRegistry()-Konstruktor kann verwendet werden, um skalierte Register zu erstellen, und die Methode CustomElementRegistry.initialize() verknüpft ein skaliertes Register mit einem DOM-Teilbaum.

Window.customElements

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

Document.customElementRegistry

Das CustomElementRegistry, das mit dem Dokument verknüpft ist.

Element.customElementRegistry

Das CustomElementRegistry, das mit dem Element verknüpft ist.

Lebenszyklus-Callbacks

Spezielle Callback-Funktionen, die innerhalb der Klassen-Definition eines benutzerdefinierten Elements definiert sind und dessen Verhalten beeinflussen:

connectedCallback()

Wird aufgerufen, wenn das benutzerdefinierte Element das erste 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 eine der Attribute des benutzerdefinierten Elements hinzugefügt, entfernt oder geändert wird.

Erweiterungen zum Erstellen benutzerdefinierter eingebauter Elemente

Die folgenden Erweiterungen sind definiert:

Das globale HTML-Attribut is

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

Die Option „is“ der Methode Document.createElement()

Ermöglicht es Ihnen, eine Instanz eines standardmäßigen HTML-Elements zu erstellen, das sich wie ein angegebenes registriertes benutzerdefiniertes eingebautes Element verhält.

CSS Pseudo-Klassen

Pseudo-Klassen, die sich speziell auf benutzerdefinierte Elemente beziehen:

:defined

Passt zu jedem Element, das definiert ist, einschließlich eingebauter und mit CustomElementRegistry.define() definierter benutzerdefinierter Elemente.

:host

Wählt den Shadow-Host des Shadow DOM, das das CSS enthält, in dem es verwendet wird.

:host()

Wählt den Shadow-Host des Shadow DOM, das das CSS enthält, in dem es verwendet wird (damit Sie ein benutzerdefiniertes Element von innerhalb seines Shadow DOM auswählen können) – aber nur, wenn der als Parameter der Funktion angegebene Selektor mit dem Shadow-Host übereinstimmt.

:host-context()

Wählt den Shadow-Host des Shadow DOM, das das CSS enthält, in dem es verwendet wird (damit Sie ein benutzerdefiniertes Element von innerhalb seines Shadow DOM auswählen können) – aber nur, wenn der als Parameter der Funktion angegebene Selektor mit dem Vorfahren des Shadow-Hosts übereinstimmt, wo er in der DOM-Hierarchie sitzt.

:state()

Passt zu benutzerdefinierten Elementen, die sich in einem angegebenen benutzerdefinierten Zustand befinden. Genauer gesagt passt es zu anonymen benutzerdefinierten Elementen, bei denen der angegebene Zustand im CustomStateSet des Elements vorhanden ist.

CSS Pseudo-Elemente

Pseudo-Elemente, die sich speziell auf benutzerdefinierte Elemente beziehen:

::part

Repräsentiert jedes Element innerhalb eines Shadow-Baums, das ein passendes part Attribut hat.

Shadow DOM

ShadowRoot

Repräsentiert den Wurzelknoten eines Shadow DOM-Teilbaums.

ShadowRoot.customElementRegistry

Das CustomElementRegistry, das mit dem Shadow-Root verknüpft ist. Kann über die customElementRegistry-Option von Element.attachShadow() festgelegt werden, oder später mit CustomElementRegistry.initialize().

Erweiterungen für Element

Erweiterungen der Element-Schnittstelle, die sich auf das Shadow DOM beziehen:

• Die Methode Element.attachShadow() fügt dem angegebenen Element einen Shadow-DOM-Baum hinzu.
• Die Eigenschaft Element.shadowRoot gibt die an das angegebene Element angehängte Shadow-Root zurück oder null, wenn kein Shadow-Root angehängt ist.

Relevante Ergänzungen zu Node

Ergänzungen der Node-Schnittstelle, die für das Shadow DOM relevant sind:

• Die Methode Node.getRootNode() gibt die Wurzel des Kontextobjekts zurück, einschließlich der Shadow-Root, wenn sie verfügbar ist.
• Die Eigenschaft Node.isConnected gibt ein Boolean zurück, das anzeigt, ob der Node mit dem Kontextobjekt verbunden ist oder nicht, z.B. dem Document-Objekt im Falle des normalen DOM oder dem ShadowRoot im Falle eines Shadow DOM.

Erweiterungen für Event

Erweiterungen der Event-Schnittstelle, die sich auf das Shadow DOM beziehen:

Event.composed

Gibt true zurück, wenn das Ereignis die Shadow-DOM-Grenze in das Standard-DOM ü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-Bäumen ein, wenn die Shadow-Root mit ShadowRoot.mode geschlossen erstellt wurde.

HTML Templates

<template>

Beinhaltet ein HTML-Fragment, das beim erstmaligen Laden eines enthaltenen Dokuments nicht gerendert 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>

Ein Platzhalter in einem Web-Component, den Sie mit Ihrem eigenen Markup füllen können, was es Ihnen ermöglicht, separate DOM-Bäume zu erstellen und sie zusammen darzustellen. Die zugehörige DOM-Schnittstelle ist HTMLSlotElement.

Das globale HTML-Attribut slot

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

Element.assignedSlot

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

Text.assignedSlot

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

Erweiterungen für Element

Erweiterungen der Element-Schnittstelle, die sich auf Slots beziehen:

Element.slot

Gibt den Namen des Shadow-DOM-Slots zurück, der dem Element angehängt ist.

CSS Pseudo-Elemente

Pseudo-Elemente, die sich speziell auf Slots beziehen:

::slotted

Passt zu jedem Inhalt, der in einen Slot eingefügt wird.

Das slotchange-Ereignis

Wird auf einer HTMLSlotElement-Instanz (<slot>-Element) ausgelöst, wenn sich die darin enthaltenen Knoten ändern.

Beispiele

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

Spezifikationen

Browser-Kompatibilität

html.elements.template

api.ShadowRoot