Web Components

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

Konzepte und Verwendung

Als Entwickler wissen wir alle, dass es eine gute Idee ist, Code so oft wie möglich wiederzuverwenden. Dies war traditionell nicht so einfach für benutzerdefinierte Markup-Strukturen — denken Sie an das komplexe HTML (und die dazugehörigen Styles und Skripte), das Sie manchmal schreiben mussten, um benutzerdefinierte UI-Steuerelemente darzustellen, 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 mit weniger Risiko von Namens- und Style-Kollisionen wiederverwendet werden können:

Benutzerdefinierte Elemente: Ein Satz von JavaScript-APIs, mit denen Sie benutzerdefinierte Elemente und deren Verhalten definieren können, die dann wie gewünscht in Ihrer Benutzeroberfläche verwendet werden können.
Shadow DOM: Ein Mechanismus zum Anhängen eines gekapselten "shadow" DOM-Baums an ein Element, entweder imperativ über JavaScript-APIs oder deklarativ in HTML. Dadurch können Sie die Funktionen eines Elements privat halten, sodass deren Styles und IDs nicht mit anderen Teilen des Dokuments kollidieren.
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-Komponenten sieht im Allgemeinen ungefähr so aus:

Erstellen Sie eine Klasse, in der Sie die Funktionalität Ihrer Web-Komponente spezifizieren, indem Sie die class-Syntax verwenden.
Registrieren Sie Ihr neues benutzerdefiniertes Element mit der Methode CustomElementRegistry.define(), indem Sie den festzulegenden Elementnamen, die Klasse oder Funktion, in der seine Funktionalität spezifiziert ist, und optional das Element, von dem es erbt, übergeben. Sie können es im globalen Register mithilfe von Window.customElements registrieren oder ein scoped registry mit dem CustomElementRegistry()-Konstruktor erstellen, um Namenskonflikte zwischen Komponenten zu vermeiden.
Falls erforderlich, fügen Sie der benutzerdefinierten Komponente ein Shadow DOM hinzu, indem Sie die Methode Element.attachShadow() verwenden. Fügen Sie dem Shadow DOM mit regulären DOM-Methoden Kindelemente, Event Listener usw. hinzu.
Definieren Sie falls erforderlich 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.
Verwenden Sie Ihr benutzerdefiniertes Element überall auf der Seite, genau wie jedes andere HTML-Element.

Leitfäden

Verwendung benutzerdefinierter Elemente: Ein Leitfaden, der zeigt, wie Sie die Funktionen benutzerdefinierter Elemente verwenden, um einfache Web-Komponenten zu erstellen, und einen Blick auf Lebenszyklus-Callback-Funktionen und einige andere erweiterte Funktionen wirft.
Verwendung von Shadow DOM: Ein Leitfaden, der die Grundlagen von Shadow DOM erklärt und zeigt, wie man ein Shadow DOM an ein Element anhängt, zum Shadow DOM-Baum hinzufügt, es stylt und mehr.
Verwendung von Vorlagen und Slots: Ein Leitfaden, der zeigt, wie Sie eine wiederverwendbare HTML-Struktur mit <template>- und <slot>-Elementen definieren und diese Struktur dann in Ihren Web-Komponenten verwenden.

Referenz

Benutzerdefinierte Elemente

CustomElementRegistry

Beinhaltet Funktionalitäten in Bezug auf benutzerdefinierte Elemente, insbesondere die CustomElementRegistry.define()-Methode, die verwendet wird, um neue benutzerdefinierte Elemente zu registrieren, damit sie dann im Dokument verwendet werden können. Der CustomElementRegistry()-Konstruktor kann verwendet werden, um spezifische Registries zu erstellen, und die CustomElementRegistry.initialize()-Methode verbindet eine spezifische Registry mit einem DOM-Teilbaum.

Window.customElements

Gibt einen Verweis auf das globale CustomElementRegistry-Objekt zurück.

Document.customElementRegistry

Das CustomElementRegistry, das mit dem Dokument verbunden ist.

Element.customElementRegistry

Das CustomElementRegistry, das mit dem Element verbunden ist.

Lebenszyklus-Callbacks

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

connectedCallback(): Wird aufgerufen, wenn das benutzerdefinierte Element erstmals 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 ein Attribut des benutzerdefinierten Elements hinzugefügt, entfernt oder verändert wird.

Erweiterungen zur Erstellung benutzerdefinierter interner 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 benutzerdefiniertes internes 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 registriertes benutzerdefiniertes internes Element verhält.

CSS-Pseudoklassen

Pseudoklassen, die sich speziell auf benutzerdefinierte Elemente beziehen:

:defined: Passt auf jedes Element, das definiert ist, einschließlich eingebauter Elemente und benutzerdefinierter Elemente, die mit CustomElementRegistry.define() definiert sind.
:host: Selektiert den Shadow-Host des Shadow DOMs, das das CSS enthält, in dem es verwendet wird.
:host(): Selektiert den Shadow-Host des Shadow DOMs, das das CSS enthält, in dem es verwendet wird (damit Sie ein benutzerdefiniertes Element von innerhalb seines Shadow DOMs selektieren können) – jedoch nur, wenn der als Parameter angegebene Selektor mit dem Shadow-Host übereinstimmt.
:host-context(): Selektiert den Shadow-Host des Shadow DOMs, das das CSS enthält, in dem es verwendet wird (damit Sie ein benutzerdefiniertes Element von innerhalb seines Shadow DOMs selektieren können) – jedoch nur, wenn der als Parameter angegebene Selektor mit dem Vorfahren des Shadow-Hosts übereinstimmt, in dem es sich in der DOM-Hierarchie befindet.
:state(): Passt auf benutzerdefinierte Elemente, die sich in einem angegebenen benutzerdefinierten Status befinden. Genauer gesagt, es passt auf anonyme benutzerdefinierte Elemente, bei denen der angegebene Zustand in der CustomStateSet des Elements vorhanden ist.

CSS Pseudoelemente

Pseudoelemente, die sich speziell auf benutzerdefinierte Elemente beziehen:

::part: Repräsentiert jedes Element innerhalb eines Shadow Tree, 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 verbunden ist. Kann über die customElementRegistry-Option von Element.attachShadow() festgelegt werden oder später mithilfe von CustomElementRegistry.initialize().

Element Erweiterungen

Erweiterungen der Element-Schnittstelle in Bezug auf Shadow DOM:

Die Methode Element.attachShadow() fügt einem spezifizierten Element einen Shadow DOM-Baum hinzu.
Die Eigenschaft Element.shadowRoot gibt die Shadow-Root zurück, die dem spezifizierten Element hinzugefügt wurde, oder null, wenn keine Shadow-Root hinzugefügt wurde.

Relevante Node Ergänzungen

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

Die Methode Node.getRootNode() gibt den Wurzelknoten des Kontext-Objekts zurück, der optional die Shadow-Root umfasst, falls verfügbar.
Die Eigenschaft Node.isConnected gibt einen booleschen Wert zurück, der angibt, ob der Knoten mit dem Kontext-Objekt verbunden ist (direkt oder indirekt), z.B. dem Document-Objekt im Fall des normalen DOMs oder dem ShadowRoot im Fall eines Shadow DOMs.

Event Erweiterungen

Erweiterungen der Event-Schnittstelle in Bezug auf Shadow DOM:

Event.composed: Gibt true zurück, wenn sich das Ereignis über die Shadow DOM-Grenze in die Standard-DOM weiter verbreitet, ansonsten false.
Event.composedPath: Gibt den Ereignispfad zurück (Objekte, auf denen Listener aufgerufen werden). Dies umfasst keine Knoten in Shadow Trees, wenn die Shadow-Root mit ShadowRoot.mode geschlossen erstellt wurde.

HTML-Vorlagen

<template>

Enthält ein HTML-Fragment, das beim ersten Laden eines 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 einer Webkomponente, den Sie mit Ihrem eigenen Markup füllen können, sodass Sie separate DOM-Bäume erstellen und zusammen präsentieren können. Die zugehörige DOM-Schnittstelle ist HTMLSlotElement.

Das slot globale HTML-Attribut

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

Element.assignedSlot

Ein schreibgeschütztes Attribut, das einen Verweis auf den <slot> zurückgibt, in den dieses Element eingefügt ist.

Text.assignedSlot

Ein schreibgeschütztes Attribut, das einen Verweis auf den <slot> zurückgibt, in den dieser Textknoten eingefügt ist.

Element Erweiterungen

Erweiterungen der Element-Schnittstelle in Bezug auf Slots:

Element.slot: Gibt den Namen des an das Element angehängten Shadow DOM-Slots zurück.

CSS Pseudoelemente

Pseudoelemente, die sich speziell auf Slots beziehen:

::slotted: Passt auf jeden Inhalt, der in einen Slot eingefügt wird.

Das slotchange-Ereignis

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

Beispiele

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

Spezifikationen

Spezifikation
HTML # the-template-element
DOM # interface-shadowroot

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden