---
title: Web Components
slug: Web/Web_Components
tags:
  - Benutzerdefinierte Elemente
  - Components
  - JavaScript
  - Landing
  - Overview
  - Schatten-DOM
  - Template
  - Web Components
  - Webkomponenten
  - custom elements
  - shadow dom
  - slot
  - Überblick
translation_of: Web/Web_Components
---
<div>{{DefaultAPISidebar("Webkomponenten")}}</div>

<div class="summary">
<p>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.</p>

<h2 id="Konzept_und_Anwendung">Konzept und Anwendung</h2>
</div>

<p>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.</p>

<p>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:</p>

<ul>
 <li><strong>Benutzerdefinierte Elemente</strong>: 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.</li>
 <li><strong>Shadow DOM</strong>: 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.</li>
 <li><strong>HTML-Vorlagen</strong>: Die {{HTMLElement("template")}}- und {{HTMLElement("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.</li>
</ul>

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

<ol>
 <li>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 <a href="/de-DE/docs/Web/JavaScript/Reference/Classes">Klassen</a>).</li>
 <li>Registrieren des neuen benutzerdefinierten Elements mithilfe der {{domxref("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.</li>
 <li>Falls erforderlich: Anfügen eines Schatten-DOMs zum benutzerdefinierten Element mithilfe der {{domxref("Element.attachShadow()")}}-Methode. Kindelemente, Ereignisbehandlungsroutinen usw. werden dem Schatten-DOM unter Verwendung der üblichen DOM-Methoden hinzugefügt.</li>
 <li>Falls erforderlich: Definieren einer HTML-Vorlage mithilfe von {{htmlelement("template")}} und {{htmlelement("slot")}}. Auch hier werden die üblichen DOM-Methoden verwendet, um die HTML-Vorlage anschließend zu kopieren und zum Schatten-DOM hinzuzufügen.</li>
 <li>Das so geschaffene benutzerdefinierte Element kann überall auf der Seite eingefügt werden — ebenso wie ein normales HTML-Element.</li>
</ol>

<h2 id="Übungen">Übungen</h2>

<dl>
 <dt><a href="/de-DE/docs/Web/Web_Components/Using_custom_elements">Benutzerdefinierte Elemente</a></dt>
 <dd>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.</dd>
 <dt><a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOM</a></dt>
 <dd>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.</dd>
 <dt><a href="/de-DE/docs/Web/Web_Components/Using_templates_and_slots">Vorlagen und Einschübe</a></dt>
 <dd>Zeigt, wie eine wiederverwendbare HTML-Struktur mithilfe der {{htmlelement("template")}} und {{htmlelement("slot")}}-Elemente definiert und diese Struktur anschließend innerhalb von Webkomponenten eingesetzt wird.</dd>
</dl>

<h2 id="Referenz">Referenz</h2>

<h3 id="Benutzerdefinierte_Elemente">Benutzerdefinierte Elemente</h3>

<dl>
 <dt>{{domxref("CustomElementRegistry")}}</dt>
 <dd>Beinhaltet Methoden in Bezug auf benutzerdefinierte Elemente, insbesondere die {{domxref("CustomElementRegistry.define()")}}-Methode, die zum Registrieren neuer benutzerdefinierter Elemente verwendet wird, damit sie in einem Dokument verwendet werden können.</dd>
 <dt>{{domxref("Window.customElements")}}</dt>
 <dd>Liefert eine Referenz auf ein <code>CustomElementRegistry</code>-Objekt.</dd>
 <dt><a href="/de-DE/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks">Rückruffunktionen innerhalb des Lebenszyklus</a></dt>
 <dd>Spezielle Callback-Funktionen, die innerhalb der Klasse des benutzerdefinierten Steuerelements definiert sind und dessen Verhalten steuern:
 <ul>
  <li><code>connectedCallback</code>: Wird aufgerufen, wenn das benutzerdefinierte Element mit dem DOM des Dokuments verbunden ist.</li>
  <li><code>disconnectedCallback</code>: Wird aufgerufen, wenn das benutzerdefinierte Element vom DOM des Dokuments abgetrennt wird.</li>
  <li><code>adoptedCallback</code>: Wird aufgerufen, wenn das benutzerdefinierte Element zu einem neuen Dokument verschoben wird.</li>
  <li><code>attributeChangedCallback</code>: Wird aufgerufen, wenn eines der Attribute des benutzerdefinierten Elements hinzugefügt, gelöscht oder verändert wird.</li>
 </ul>
 </dd>
 <dt>Erweiterungen, um benutzerdefinierte eingebaute Elemente zu erzeugen</dt>
 <dd>
 <ul>
  <li>Das globale {{htmlattrxref("is")}}-Attribut dient dazu, ein Standard-HTML-Element anzugeben, das sich wie ein benutzerdefiniertes Element verhalten soll.</li>
  <li>Die "is"-Option der {{domxref("Document.createElement()")}}-Methode dient dazu, eine Instanz eines zuvor registrierten benutzerdefinierten Standard-HTML-Elements zu erzeugen.</li>
 </ul>
 </dd>
 <dt>CSS Pseudoklassen</dt>
 <dd>Pseudoklassen, die sich speziell auf benutzerdefinierte Elemente beziehen:
 <ul>
  <li>{{cssxref(":defined")}}: Trifft auf jedes definierte Element zu, einschließlich eingebauter und benutzerdefinierter Elemente, die mithilfe von <code>CustomElementRegistry.define()</code> definiert sind.</li>
  <li>{{cssxref(":host")}}: Wählt das jeweilige Container-Element des <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOMs</a>, auf das die jeweilige CSS-Regel angewendet wird.</li>
  <li>{{cssxref(":host()")}}: Wählt das Container-Element des <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOMs</a>, 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.</li>
  <li>{{cssxref(":host-context()")}}: Wählt das Container-Element des <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOMs</a>, 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.</li>
 </ul>
 </dd>
</dl>

<h3 id="Schatten-DOM">Schatten-DOM</h3>

<dl>
 <dt>{{domxref("ShadowRoot")}}</dt>
 <dd>Repräsentiert die Wurzel-Node eines <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOM</a>-Baums.</dd>
 <dt>{{domxref("DocumentOrShadowRoot")}}</dt>
 <dd>Ein Mixin, das diejenigen Merkmale definiert, die sowohl in einem Dokument als auch in der Wurzel-Node eines <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOM</a>-Baums verfügbar sind.</dd>
 <dt>{{domxref("Element")}}-Erweiterungen</dt>
 <dd>Erweiterungen zur <code>Element</code>-Schnittstelle, die sich auf das <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOM</a> beziehen:
 <ul>
  <li>Die {{domxref("Element.attachShadow()")}}-Methode fügt einen <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOM</a>-Baum an das angegebene Element an.</li>
  <li>Die {{domxref("Element.shadowRoot")}}-Eigenschaft liefert die Wurzel-Node des <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOM</a>-Baums des angegebenen Elements; oder <code>null</code>, falls kein <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOM</a>-Baum angefügt wurde.</li>
 </ul>
 </dd>
 <dt>Wichtige {{domxref("Node")}}-Erweiterungen</dt>
 <dd>Erweiterung zur <code>Node</code>-Schnittstelle, die sich auf das <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOM</a> beziehen:
 <ul>
  <li>Die {{domxref("Node.getRootNode()")}}-Methode liefert die Wurzel-Node des Kontextobjekts, die optional auch die Wurzel-Node des <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOM</a>-Baums enthält, sofern verfügbar.</li>
  <li>Die {{domxref("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 {{domxref("Document")}}-Objekt im Falle eines normalen DOMs bzw. das {{domxref("ShadowRoot")}}-Objekt im Falle eines <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOMs</a>.</li>
 </ul>
 </dd>
 <dt>{{domxref("Event")}}-Erweiterungen</dt>
 <dd>Erweiterungen der <code>Event</code>-Schnittstelle, die sich auf das <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOM</a> beziehen:
 <ul>
  <li>{{domxref("Event.composed")}}: Liefert einen booleschen Wert, der angibt, ob ein Ereignis sich vom <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOM</a> in das normale DOM fortsetzt (<code>true</code>), oder nicht (<code>false</code>).</li>
  <li>{{domxref("Event.composedPath")}}: Liefert den Pfad des Ereignisses (Objekte, deren Ereignisbehandlungsroutinen aufgerufen werden). Ausgeschlossen hiervon sind Nodes in <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOM</a>-Bäumen, wenn die Wurzel-Node des <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOM</a>-Baums mit <code>{{domxref("ShadowRoot.mode")}} = "closed"</code> erstellt wurde.</li>
 </ul>
 </dd>
</dl>

<h3 id="HTML-Vorlagen">HTML-Vorlagen</h3>

<dl>
 <dt>{{htmlelement("template")}}</dt>
 <dd>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: {{domxref("HTMLTemplateElement")}}.</dd>
 <dt>{{htmlelement("slot")}}</dt>
 <dd>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: {{domxref("HTMLSlotElement")}}.</dd>
 <dt>Das globale <code><a href="/de-DE/docs/Web/HTML/Global_attributes/slot">slot</a></code> HTML-Attribut</dt>
 <dd>Weist einem Element einen Einschub innerhalb eines <a href="/de-DE/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOM</a>-Baums zu.</dd>
 <dt>{{domxref("Slotable")}}</dt>
 <dd>Ein Mixin, das sowohl von {{domxref("Element")}}- als auch {{domxref("Text")}}-Nodes implementiert wird. Es definiert Methoden, die es den jeweiligen Nodes erlauben, Inhalt eines {{htmlelement("slot")}}-Elements zu werden. Das Mixin definiert ein Attribute: {{domxref("Slotable.assignedSlot")}}, das eine Referenz auf den Einschub liefert, in den die Node eingefügt wurde.</dd>
</dl>

<dl>
 <dt>{{domxref("Element")}}-Erweiterungen</dt>
 <dd>Erweiterungen der <code>Element</code>-Schnittstelle, die sich auf Einschübe beziehen:
 <ul>
  <li>{{domxref("Element.slot")}}: Liefert den Namen des Einschubs, der dem Element hinzugefügt wurde.</li>
 </ul>
 </dd>
 <dt>CSS Pseudoelemente</dt>
 <dd>Pseudoelemente, die sich speziell auf Einschübe beziehen:
 <ul>
  <li>{{cssxref("::slotted")}}: Trifft auf jeden Inhalt zu, der einem Einschub hinzugefügt wurde.</li>
 </ul>
 </dd>
 <dt>Das {{event("slotchange")}}-Ereignis</dt>
 <dd>Wird auf einer {{domxref("HTMLSlotElement")}}-Instanz ({{htmlelement("slot")}}-Element) ausgelöst, wenn die Node(s), die sich im Einschub befinden, verändern.</dd>
</dl>

<h2 id="Beispiele">Beispiele</h2>

<p>Sie finden eine Reihe von Beispielen in unserem <a href="https://github.com/mdn/web-components-examples">web-components-examples</a> GitHub-Repository. Diesem Repository werden über die Zeit weitere Beispiele hinzugefügt.</p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
  <tr>
   <td>{{SpecName("HTML WHATWG","scripting.html#the-template-element","&lt;template&gt; element")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td>Definition von {{HTMLElement("template")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML WHATWG","scripting.html#the-slot-element","&lt;slot&gt; element")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td>Definition von {{HTMLElement("slot")}}.</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML WHATWG","custom-elements.html#custom-elements","custom elements")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td>Definition von <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">benutzerdefinierten HTML Elementen</a>.</td>
  </tr>
  <tr>
   <td>{{SpecName("DOM WHATWG","#shadow-trees","shadow trees")}}</td>
   <td>{{Spec2("DOM WHATWG")}}</td>
   <td>Definition des <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOMs</a>.</td>
  </tr>
  <tr>
   <td>{{SpecName("HTML Imports", "", "")}}</td>
   <td>{{Spec2("HTML Imports")}}</td>
   <td>Erste <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports">HTML Importe</a>-Definition.</td>
  </tr>
  <tr>
   <td>{{SpecName("Shadow DOM", "", "")}}</td>
   <td>{{Spec2("Shadow DOM")}}</td>
   <td>Erste <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">Schatten-DOM</a>-Definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browserkompatibilität">Browserkompatibilität</h2>

<p>Grundsätzlich:</p>

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

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

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li><a href="https://www.webcomponents.org/">webcomponents.org</a> — Website, die Beispiele, Übungen und weiterführende Informationen zu Webkomponenten bietet.</li>
 <li><a href="https://github.com/hybridsjs/hybrids">Hybrids</a> — Open-Source Webkomponenten-Bibliothek, die simple Objekte und reine Funktionen der <code>class</code> und <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">this</span></font> Syntax vorzieht. Die Bibliothek bietet eine einfache, funktionale API, um benutzerdefinierte Elemente zu erzeugen.</li>
 <li><a href="https://www.polymer-project.org/">Polymer</a> — Googles Webkomponenten-Framework — eine Sammlung von Polyfills, Erweiterungen und Beispielen. Dieses Framework ist aktuell der einfachste Weg, Webkomponenten browserübergreifend einzusetzen.</li>
 <li><a href="https://github.com/devpunks/snuggsi#readme">Snuggsi.es</a> — Einfacher Zugriff auf Webkomponenten in ~1kB, <em>inklusive Polyfill</em> — Alles, was Sie benötigen, ist ein Browser und ein grundsätzliches Verständnis von HTML, CSS und JavaScript Klassen, um zu starten.</li>
 <li><a href="https://github.com/slimjs/slim.js">Slim.js</a> — Open-Source Webkomponenten-Bibliothek — eine hochperformante Bibliothek, um schnell und einfach Komponenten zu erstellen. Durch Plug-ins erweiterbar und Cross-Framework-kompatibel.</li>
 <li><a href="https://www.htmlelements.com/">Smart.js</a> — Webkomponenten-Bibliothek mit einer einfachen API, um browserübergreifend benutzerdefinierte Elemente zu erstellen. </li>
</ul>