From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- .../web/web_components/custom_elements/index.html | 258 +++++++++++++++++++++ files/de/web/web_components/index.html | 222 ++++++++++++++++++ .../using_custom_elements/index.html | 249 ++++++++++++++++++++ 3 files changed, 729 insertions(+) create mode 100644 files/de/web/web_components/custom_elements/index.html create mode 100644 files/de/web/web_components/index.html create mode 100644 files/de/web/web_components/using_custom_elements/index.html (limited to 'files/de/web/web_components') diff --git a/files/de/web/web_components/custom_elements/index.html b/files/de/web/web_components/custom_elements/index.html new file mode 100644 index 0000000000..2f29481161 --- /dev/null +++ b/files/de/web/web_components/custom_elements/index.html @@ -0,0 +1,258 @@ +--- +title: Benutzerdefinierte Elemente +slug: Web/Web_Components/Custom_Elements +translation_of: Web/Web_Components/Using_custom_elements +--- +

Benutzerdefinierte Elemente sind stellen die Möglichkeit bereit, benutzerdefinierte HTML-Elements zu schaffen. Sie können eigenes durch JavaScript beschriebenes Verhalten und CSS-Styling haben. Sie sind Teil der Web-Components, können aber auch unabhängig von diesen benutzt werden.

+ +
+

Note: Benutzerdefinierte Elemente gelten erst seit Kurzem als stabil definiert und Teile des MDN weisen Dokumentation für veraltete APIs früherer Spezifikationsentwürfe auf.

+
+ +

Obwohl es bereits möglich war, benutzerdefinierte Tag-Namen wie <mytag> zu schaffen, sie mit CSS zu stylen und via JavaScript ihr Verhalten zu beschreiben, haben benutzerdefinierte Elemente ihre Daseinsberechtigung. Ihr großer Vorteil ist das Vorhandensein so genannter Lebenszyklus-Reaktionen, die es erlauben, Methoden zu bestimmten Momenten des "Lebenszyklus" des Elementes aufzurufen. So kann beispielsweise Verhalten beschrieben werden, dass ausgeführt wird, wenn das Element dem DOM hinzugefügt wird ("connected"), wenn es aus diesem entfernt wird ("disconnected") oder sich seine Attribute ändern.

+ +

Die Schlüsselmethode für benutzerdefinierte Elemente ist die {{domxref("CustomElementRegistry.define()")}}-Methode, die benutzt werden kann, um ein neues benutzerdefinierte Elemente zu erschaffen. Dieses neue Element wird dann für jede seiner Instanzen diese neue Klasse anstelle des standardmäßig verwendeten {{domxref("HTMLUnknownElement")}} benutzen. Benutzerdefinierte Elemente können auch auf nativen Elementen wie  <button> basieren, indem sie folgende Syntax benutzen: <button is="my-button"> Sie werden dann benutzerdefinierte eingebaute Elemente genannt.

+ +

Methoden benutzerdefinierter Elemente

+ +

Benutzerdefinierte Elemente besitzen folgende Methoden:

+ +
+
constructor()
+
Wird aufgerufen, wenn eine Element erzeugt und erweitert wird.
+
connectedCallback()
+
Wird aufgerufen, wenn das Element in das Dokument eingefügt wird, auch wenn es nur der Shadow Tree ist
+
disconnectedCallback()
+
Wird aufgerufen, wenn das Element aus dem Dokument entfernt wird.
+
attributeChangedCallback(attributeName, oldValue, newValue, namespace)
+
Wird aufgerufen, wenn Attribute des Elements geändert, angefügt, entfernt oder ersetzt werden. Wird nur für beobachtete Attribute aufgerufen.
+
adoptedCallback(oldDocument, newDocument)
+
Wird aufgerufen, wenn das Element in ein neues Dokument übernommen wird.
+
+ +

Beispiele

+ +

Benutzerdefinierte Elemente müssen die class Syntax benutzen, die in neueren JavaScript-Versionen bereit steht.

+ +

HTML-Datei:

+ +
Wenn unter diesem Text nichts steht, unterstützt ihr Browser keine benutzerdefinierten Elemente.
+<x-product data-name="Ruby" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/ruby.png" data-url="http://example.com/1"></x-product>
+<x-product data-name="JavaScript" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/javascript.png" data-url="http://example.com/2"></x-product>
+<x-product data-name="Python" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/python.png" data-url="http://example.com/3"></x-product>
+ +

JS-Datei:

+ +
// Klasse für das Element erzeugen
+class XProduct extends HTMLElement {
+  constructor() {
+    // super() muss immer als erstes im Konstruktor aufgerufen werden
+    super();
+
+    // Shadow-Root erzeugen
+    var shadow = this.attachShadow({mode: 'open'});
+
+    // Standard img-Element erzeugen und Attribute setzen
+    var img = document.createElement('img');
+    img.alt = this.getAttribute('data-name');
+    img.src = this.getAttribute('data-img');
+    img.width = '150';
+    img.height = '150';
+    img.className = 'product-img';
+
+    // Bild der Shadow-Root hinzufügen.
+    shadow.appendChild(img);
+
+    // Event-Listener zum Bild hinzufügen.
+    img.addEventListener('click', () => {
+      window.location = this.getAttribute('data-url');
+    });
+
+    // Link zum Produkt erzeugen.
+    var link = document.createElement('a');
+    link.innerText = this.getAttribute('data-name');
+    link.href = this.getAttribute('data-url');
+    link.className = 'product-name';
+
+    // Link der Shadow-Root hinzufügen.
+    shadow.appendChild(link);
+  }
+}
+
+// Neues Element definieren
+customElements.define('x-product', XProduct);
+
+ +

CSS-Datei:

+ +
body {
+  background: #F7F7F7;
+}
+
+x-product {
+  display: inline-block;
+  float: left;
+  margin: 0.5em;
+  border-radius: 3px;
+  background: #FFF;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
+  font-family: Helvetica, arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+x-product::slotted(.product-img) {
+  cursor: pointer;
+  background: #FFF;
+  margin: 0.5em;
+}
+
+x-product::slotted(.product-name) {
+  display: block;
+  text-align: center;
+  text-decoration: none;
+  color: #08C;
+  border-top: 1px solid #EEE;
+  font-weight: bold;
+  padding: 0.75em 0;
+}
+
+ +

Unten kann das Live-Beispiel des obigen Codes gesehen werden:

+ +

{{ EmbedLiveSample('Example', '1500', '250', '', 'Web/Web_Components/Custom_Elements') }}

+ +

Beobachtete Attribute

+ +

Um benachrichtigt zu werden, wenn Attribute verändert werden, muss eine Liste von beobachteten Attributen bei der Initialisierung des Elements angelegt werden, in dem eine statische observedAttributes get-Methode der Klasse des Elementes hinzugefügt wird, die ein Array mit den entsprechenden Attributsnamen zurückgibt.

+ +

JS-Datei:

+ +
class HelloElement extends HTMLElement {
+  // Das 'name'-Attribut beobachten.
+  static get observedAttributes() {return ['name']; }
+
+  // Auf Attributsänderungen reagieren.
+  attributeChangedCallback(attr, oldValue, newValue) {
+    if (attr == 'name') {
+      this.textContent = `Hello, ${newValue}`;
+    }
+  }
+}
+
+// Neues Element definieren
+customElements.define('hello-element', HelloElement);
+
+ +

HTML-Datei:

+ +
<hello-element name="Anita"></hello-element>
+ +

Unten kann das Live-Beispiel des obigen Codes gesehen werden:

+ +

{{ EmbedLiveSample('Observed_attributes', '750', '100', '', 'Web/Web_Components/Custom_Elements') }}

+ +

Spezifikationen

+ +

Benutzerdefinierte Elemente sind in der folgenden Spezifikation definiert:

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
The HTML Standard: Custom elementsLS 
+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatChrome(59.0)}}{{CompatNo}}{{CompatOpera(47.0)}}10.1
Benutzerdefinierte eingebaute Elemente{{CompatNo}}{{CompatChrome(59.0)}}{{CompatNo}}{{CompatOpera(47.0)}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)Chrome for AndroidIE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatChrome(56.0)}}{{CompatNo}}{{CompatOpera(47.0)}}10.1
Benutzerdefinierte eingebaute Elemente{{CompatNo}}{{CompatChrome(56.0)}}{{CompatNo}}{{CompatOpera(47.0)}}{{CompatNo}}
+
+ +

1. Firefox hat eine "dom.webcomponents.enabled"-Eigenschaft in about:config, dennoch ist sind benutzerdefinierte Elemente nicht verfügbar, wenn diese auf true gesetzt wurde.

+ + + + + +

Resources

+ + diff --git a/files/de/web/web_components/index.html b/files/de/web/web_components/index.html new file mode 100644 index 0000000000..bc5e676475 --- /dev/null +++ b/files/de/web/web_components/index.html @@ -0,0 +1,222 @@ +--- +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 +--- +
{{DefaultAPISidebar("Webkomponenten")}}
+ +
+

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.

+ +

Konzept und Anwendung

+
+ +

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.

+ +

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:

+ + + +

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

+ +
    +
  1. 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 Klassen).
    2. +
  2. 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.
    3. +
  3. 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.
    4. +
  4. 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.
    5. +
  5. Das so geschaffene benutzerdefinierte Element kann überall auf der Seite eingefügt werden — ebenso wie ein normales HTML-Element.
    6. +
+ +

Übungen

+ +
+
Benutzerdefinierte Elemente
+
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.
+
Schatten-DOM
+
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.
+
Vorlagen und Einschübe
+
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.
+
+ +

Referenz

+ +

Benutzerdefinierte Elemente

+ +
+
{{domxref("CustomElementRegistry")}}
+
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.
+
{{domxref("Window.customElements")}}
+
Liefert eine Referenz auf ein CustomElementRegistry-Objekt.
+
Rückruffunktionen innerhalb des Lebenszyklus
+
Spezielle Callback-Funktionen, die innerhalb der Klasse des benutzerdefinierten Steuerelements definiert sind und dessen Verhalten steuern: +
    +
  • connectedCallback: Wird aufgerufen, wenn das benutzerdefinierte Element mit dem DOM des Dokuments verbunden ist.
    • +
  • disconnectedCallback: Wird aufgerufen, wenn das benutzerdefinierte Element vom DOM des Dokuments abgetrennt wird.
    • +
  • adoptedCallback: Wird aufgerufen, wenn das benutzerdefinierte Element zu einem neuen Dokument verschoben wird.
    • +
  • attributeChangedCallback: Wird aufgerufen, wenn eines der Attribute des benutzerdefinierten Elements hinzugefügt, gelöscht oder verändert wird.
    • +
+
+
Erweiterungen, um benutzerdefinierte eingebaute Elemente zu erzeugen
+
+
    +
  • Das globale {{htmlattrxref("is")}}-Attribut dient dazu, ein Standard-HTML-Element anzugeben, das sich wie ein benutzerdefiniertes Element verhalten soll.
    • +
  • Die "is"-Option der {{domxref("Document.createElement()")}}-Methode dient dazu, eine Instanz eines zuvor registrierten benutzerdefinierten Standard-HTML-Elements zu erzeugen.
    • +
+
+
CSS Pseudoklassen
+
Pseudoklassen, die sich speziell auf benutzerdefinierte Elemente beziehen: +
    +
  • {{cssxref(":defined")}}: Trifft auf jedes definierte Element zu, einschließlich eingebauter und benutzerdefinierter Elemente, die mithilfe von CustomElementRegistry.define() definiert sind.
    • +
  • {{cssxref(":host")}}: Wählt das jeweilige Container-Element des Schatten-DOMs, auf das die jeweilige CSS-Regel angewendet wird.
    • +
  • {{cssxref(":host()")}}: Wählt das Container-Element des Schatten-DOMs, 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.
    • +
  • {{cssxref(":host-context()")}}: Wählt das Container-Element des Schatten-DOMs, 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.
    • +
+
+
+ +

Schatten-DOM

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

HTML-Vorlagen

+ +
+
{{htmlelement("template")}}
+
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")}}.
+
{{htmlelement("slot")}}
+
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")}}.
+
Das globale slot HTML-Attribut
+
Weist einem Element einen Einschub innerhalb eines Schatten-DOM-Baums zu.
+
{{domxref("Slotable")}}
+
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.
+
+ +
+
{{domxref("Element")}}-Erweiterungen
+
Erweiterungen der Element-Schnittstelle, die sich auf Einschübe beziehen: +
    +
  • {{domxref("Element.slot")}}: Liefert den Namen des Einschubs, der dem Element hinzugefügt wurde.
    • +
+
+
CSS Pseudoelemente
+
Pseudoelemente, die sich speziell auf Einschübe beziehen: +
    +
  • {{cssxref("::slotted")}}: Trifft auf jeden Inhalt zu, der einem Einschub hinzugefügt wurde.
    • +
+
+
Das {{event("slotchange")}}-Ereignis
+
Wird auf einer {{domxref("HTMLSlotElement")}}-Instanz ({{htmlelement("slot")}}-Element) ausgelöst, wenn die Node(s), die sich im Einschub befinden, verändern.
+
+ +

Beispiele

+ +

Sie finden eine Reihe von Beispielen in unserem web-components-examples GitHub-Repository. Diesem Repository werden über die Zeit weitere Beispiele hinzugefügt.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("HTML WHATWG","scripting.html#the-template-element","<template> element")}}{{Spec2("HTML WHATWG")}}Definition von {{HTMLElement("template")}}.
{{SpecName("HTML WHATWG","scripting.html#the-slot-element","<slot> element")}}{{Spec2("HTML WHATWG")}}Definition von {{HTMLElement("slot")}}.
{{SpecName("HTML WHATWG","custom-elements.html#custom-elements","custom elements")}}{{Spec2("HTML WHATWG")}}Definition von benutzerdefinierten HTML Elementen.
{{SpecName("DOM WHATWG","#shadow-trees","shadow trees")}}{{Spec2("DOM WHATWG")}}Definition des Schatten-DOMs.
{{SpecName("HTML Imports", "", "")}}{{Spec2("HTML Imports")}}Erste HTML Importe-Definition.
{{SpecName("Shadow DOM", "", "")}}{{Spec2("Shadow DOM")}}Erste Schatten-DOM-Definition.
+ +

Browserkompatibilität

+ +

Grundsätzlich:

+ + + +

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

+ +

Siehe auch

+ + diff --git a/files/de/web/web_components/using_custom_elements/index.html b/files/de/web/web_components/using_custom_elements/index.html new file mode 100644 index 0000000000..9486ce75e1 --- /dev/null +++ b/files/de/web/web_components/using_custom_elements/index.html @@ -0,0 +1,249 @@ +--- +title: Benutzerdefinierte Elemente +slug: Web/Web_Components/Using_custom_elements +translation_of: Web/Web_Components/Using_custom_elements +--- +
{{DefaultAPISidebar("Web Components")}}
+ +

Eines der Hauptmerkmale des Web Components Standards ist die Möglichkeit, benutzerdefinierte Elemente (custom elements) zu erstellen, die ihre Funktionalität auf einer HTML-Seite kapseln, anstatt sich mit einem langen, verschachtelten Stapel von Elementen begnügen zu müssen, die zusammen eine benutzerdefinierte Seitenfunktion bereitstellen. Dieser Artikel stellt die Verwendung von benutzerdefinierten HTML-Elementen vor.

+ +
+

Hinweis: Benutzerdefinierte Elemente werden standardmäßig in Chrome und Opera unterstützt. Firefox ist sehr weit in der Entwicklung; sie sind derzeit verfügbar, wenn Sie die Einstellungen dom.webcomponents.shadowdom.enabled und dom.webcomponents.customelements.enabled auf true setzen. Die Implementierung von Firefox soll in der Version 60/61 standardmäßig aktiviert werden. Safari unterstützt bisher nur autonome benutzerdefinierte Elemente, und Edge arbeitet auch an einer Implementierung.

+
+ +

High-Level-Ansicht

+ +

Der Controller von benutzerdefinierten Elementen in einem Web-Dokument ist das Objekt {{domxref("CustomElementRegistry")}} - mit diesem Objekt können Sie ein benutzerdefiniertes Element auf der Seite registrieren, Informationen darüber zurückgeben, welche benutzerdefinierten Elemente registriert sind etc.

+ +

Um ein benutzerdefiniertes Element auf der Seite zu registrieren, verwenden Sie die Methode {{domxref("CustomElementRegistry.define()")}}. Das sind die Argumente:

+ + + +

So können wir z.B. ein benutzerdefiniertes Wortzählelement wie dieses definieren:

+ +
customElements.define('word-count', WordCount, { extends: 'p' });
+ +

Das Element heißt word-count, sein Klassenobjekt ist WordCount, und es erweitert das Element {{htmlelement("p")}}.

+ +

Das Klassenobjekt eines benutzerdefinierten Elements wird mit der ES 2015 Standardsyntax einer Klasse geschrieben. Zum Beispiel ist WordCountso aufgebaut:

+ +
class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // Element functionality written in here
+
+    ...
+  }
+}
+ +

Dies ist nur ein einfaches Beispiel, aber es gibt noch mehr, was Sie hier tun können. Es ist möglich, spezifische Lifecycle-Callbacks innerhalb des Konstruktors zu definieren, die an bestimmten Stellen im Lebenszyklus des Elements ablaufen. Zum Beispiel wird connectedCallback aufgerufen, wenn das benutzerdefinierte Element zum ersten Mal mit dem DOM des Dokuments verbunden wird, während attributeChangedCallback aufgerufen wird, wenn eines der Attribute des benutzerdefinierten Elements hinzugefügt, entfernt oder geändert wird.

+ +

Im untenstehenden Kapitel {{anch("Using the lifecycle callbacks")}} wirst du mehr über Lifecycle-Callbacks erfahren.

+ +

Es gibt zwei Arten von benutzerdefinierten Elementen:

+ + + +

Weitere einfache Beispiele

+ +

Wir gehen durch einige einfache Beispiele um etwas detaillierter zu zeigen wie benutzerdefinierte Elemente erzeugt werden. 

+ +

Autonome benutzerdefinierte Elemente

+ +

Wir betrachten ein Beispiel eines autonomen benutzerdefinierte Elementes —
+ <popup-info-box> (siehe hierzu live example).

+ +

Dieses Element nimmt ein Icon und einen Textstring entgegen und fügt das Icon in die Seite ein. Erhält das Icon den Focus, wird der Text in einem Popup-Dialog angezeigt um mehr Information anzubieten

+ +

Folgendes  JavaScript File definiert eine Klasse  PopUpInfo, welches das {{domxref("HTMLElement")}} erweitert. Autonome benutzerdefinierte Elemente erweitern nahezu immer das HTMLElement.

+ +
class PopUpInfo extends HTMLElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // write element functionality in here
+
+    ...
+  }
+}
+ +

Dieser Code enthält die {{jsxref("Classes.constructor","constructor")}} Definition für diese Klasse, welche immer mit einem Aufruf von  super() beginnt, damit die korrekte Prototypkette erzeugt wird.

+ +

Innerhalb des Konstruktors definieren wir alle Funktionalität welche das Element haben wird wenn von diesem eine Instanz erzeugt wird. 

+ +

Wir binden eine shadow root an das Element, benutzen DOM-Funktionalität um die interne shadow DOM -Struktur zu erzeugen, welch dann an die shadow root gebunden wird. Abschließend fügen wir der shadow root noch etwas CSS hinzu um diese zu stylen.

+ +
// Create a shadow root
+var shadow = this.attachShadow({mode: 'open'});
+
+// Create spans
+var wrapper = document.createElement('span');
+wrapper.setAttribute('class','wrapper');
+var icon = document.createElement('span');
+icon.setAttribute('class','icon');
+icon.setAttribute('tabindex', 0);
+var info = document.createElement('span');
+info.setAttribute('class','info');
+
+// Take attribute content and put it inside the info span
+var text = this.getAttribute('text');
+info.textContent = text;
+
+// Insert icon
+var imgUrl;
+if(this.hasAttribute('img')) {
+  imgUrl = this.getAttribute('img');
+} else {
+  imgUrl = 'img/default.png';
+}
+var img = document.createElement('img');
+img.src = imgUrl;
+icon.appendChild(img);
+
+// Create some CSS to apply to the shadow dom
+var style = document.createElement('style');
+
+style.textContent = '.wrapper {' +
+// CSS truncated for brevity
+
+// attach the created elements to the shadow dom
+
+shadow.appendChild(style);
+shadow.appendChild(wrapper);
+wrapper.appendChild(icon);
+wrapper.appendChild(info);
+ +

Letztlich registrieren wir unser benutzerdefiniertes Elementen in der CustomElementRegistry mit der Methode define() , in deren Parametern spezifizieren wir den Namen des Elements und dann den Namen der Klasse welche die Funktionalität definiert:

+ +
customElements.define('popup-info', PopUpInfo);
+ +

Jetzt ist unser benutzerdefiniertes Elementen fertig zur Benutzung auf unserer Seite.
+ In unserem HTML sieht das nun so aus:

+ +
<popup-info img="img/alt.png" text="Your card validation code (CVC)
+  is an extra security feature — it is the last 3 or 4 numbers on the
+  back of your card.">
+ +
+

Note: Die vollständige  JavaScript Quelle .

+
+ +

Customized built-in elements

+ +

Now let's have a look at another customized built in element example — expanding-list (see it live also). This turns any unordered list into an expanding/collapsing menu.

+ +

First of all, we define our element's class, in the same manner as before:

+ +
class ExpandingList extends HTMLUListElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // write element functionality in here
+
+    ...
+  }
+}
+ +

We will not explain the element functionality in any detail here, but you can discover how it works by checking out the source code. The only real difference here is that our element is extending the {{domxref("HTMLUListElement")}} interface, and not {{domxref("HTMLElement")}}. So it has all the characteristics of a {{htmlelement("ul")}} element with the functionality we define built on top, rather than being a standalone element. This is what makes it a customized built-in, rather than an autonomous element.

+ +

Next, we register the element using the define() method as before, except that this time it also includes an options object that details what element our custom element inherits from:

+ +
customElements.define('expanding-list', ExpandingList, { extends: "ul" });
+ +

Using the built-in element in a web document also looks somewhat different:

+ +
<ul is="expanding-list">
+
+  ...
+
+</ul>
+ +

You use a <ul> element as normal, but specify the name of the custom element inside the is attribute.

+ +
+

Note: Again, you can see the full JavaScript source code here.

+
+ +

Using the lifecycle callbacks

+ +

You can define several different callbacks inside a custom element's constructor, which fire at different points in the element's lifecycle:

+ + + +

Let's look at an example of these in use. The code below is taken from the life-cycle-callbacks example (see it running live). This is a trivial example that simply generates a colored square of a fixed size on the page. The custom element looks like this:

+ +
<custom-square l="100" c="red"></custom-square>
+ +

The class constructor is really simple — here we attach a shadow DOM to the element, then attach empty {{htmlelement("div")}} and {{htmlelement("style")}} elements to the shadow root:

+ +
var shadow = this.attachShadow({mode: 'open'});
+
+var div = document.createElement('div');
+var style = document.createElement('style');
+shadow.appendChild(style);
+shadow.appendChild(div);
+ +

The key function in this example is updateStyle() — this takes an element, gets its shadow root, finds its <style> element, and adds {{cssxref("width")}}, {{cssxref("height")}}, and {{cssxref("background-color")}} to the style.

+ +
function updateStyle(elem) {
+  var shadow = elem.shadowRoot;
+  var childNodes = shadow.childNodes;
+  for(var i = 0; i < childNodes.length; i++) {
+    if(childNodes[i].nodeName === 'STYLE') {
+      childNodes[i].textContent = 'div {' +
+                          ' width: ' + elem.getAttribute('l') + 'px;' +
+                          ' height: ' + elem.getAttribute('l') + 'px;' +
+                          ' background-color: ' + elem.getAttribute('c');
+    }
+  }
+}
+ +

The actual updates are all handled by the life cycle callbacks, which are placed inside the constructor. The connectedCallback() runs when the element is added to the DOM — here we run the updateStyle() function to make sure the square is styled as defined in its attributes:

+ +
connectedCallback() {
+  console.log('Custom square element added to page.');
+  updateStyle(this);
+}
+ +

the disconnectedCallback() and adoptedCallback() callbacks log simple messages to the console to inform us when the element is either removed from the DOM, or moved to a different page:

+ +
disconnectedCallback() {
+  console.log('Custom square element removed from page.');
+}
+
+adoptedCallback() {
+  console.log('Custom square element moved to new page.');
+}
+ +

The attributeChangedCallback() callback is run whenever one of the element's attributes is changed in some way. As you can see from its properties, it is possible to act on attributes individually, looking at their name, and old and new attribute values. In this case however, we are just running the updateStyle() function again to make sure that the square's style is updated as per the new values:

+ +
attributeChangedCallback(name, oldValue, newValue) {
+  console.log('Custom square element attributes changed.');
+  updateStyle(this);
+}
+ +

Note that to get the attributeChangedCallback() callback to fire when an attribute changes, you have to observe the attributes. This is done by calling the observedAttributes() getter inside custom element class, including inside it a return statement that returns an array containing the names of the attributes you want to observe:

+ +
static get observedAttributes() {return ['w', 'l']; }
+ +

This is placed right at the top of the constructor, in our example.

+ +
+

Note: Find the full JavaScript source here.

+
-- cgit v1.2.3-54-g00ecf