Was ist der Unterschied zwischen Webkomponenten und benutzerdefinierten Elementen?

"Webkomponenten" und "Benutzerdefinierte Elemente" werden häufig vertauscht, und die Websuche nach dem Titel dieser Frage führt noch nicht zu großer Klarheit. Lassen Sie uns das beheben.

Benutzerdefinierte Elemente sind neben Shadow DOM-, Vorlagen- und HTML-Importen ein spezifizierender Bestandteil des Web Components- Standards.

Aus der Spezifikation:

Benutzerdefinierte Elemente bieten Autoren die Möglichkeit, ihre eigenen DOM-Elemente mit vollem Funktionsumfang zu erstellen. Obwohl Autoren in ihren Dokumenten immer Nicht-Standard-Elemente verwenden konnten, deren anwendungsspezifisches Verhalten nachträglich durch Skripten oder ähnliches hinzugefügt wurde, waren solche Elemente in der Vergangenheit nicht konform und nicht sehr funktional. Durch das Definieren eines benutzerdefinierten Elements können Autoren dem Parser mitteilen, wie ein Element ordnungsgemäß erstellt werden soll und wie Elemente dieser Klasse auf Änderungen reagieren sollen.

Geschichte

Die Spezifikation ist jetzt bei v1 . Die vorherige Version, v0, hat unterstützt seit Chrome 33 und hatte eine andere API verwenden document.registerElement- das ist jetzt veraltet .

Verwendung

Benutzerdefinierte Elemente können entweder autonom sein (ein neues Element von Grund auf neu erstellen ( dh HTMLElement erweitern ) oder ein vorhandenes HTML-Element (z. B. HTMLButtonElement) anpassen.

// autonomous element
customElements.define("flag-icon", FlagIcon);
// customized <button> element
customElements.define("plastic-button", PlasticButton, { extends: "button" });

Der zweite Parameter des customElements.define()Aufrufs ist der Name der Klasse, die das Verhalten des Elements implementiert. Siehe die Beispiele in der Spezifikation für autonome Elemente und für benutzerdefinierte eingebaute Elemente .

class PlasticButton extends HTMLButtonElement {
  constructor() {
    super();

    this.addEventListener("click", () => {
      // Draw some fancy animation effects!
    });
  }
}

Benutzerdefinierte Elemente werden nativ in unterstützt einigen modernen Browsern und kann polyfilled für ältere Browser Safari 7+ und IE11 zurück. Siehe auch die Polyfüllung v1 .

Vorlagen und Schatten-DOM

Durch die Verwendung von Vorlagen und Schatten-DOM in einem benutzerdefinierten Element können Sie das Element einfacher handhaben und wiederverwenden.

Vorlagen erlauben die Verwendung von HTML, um die Struktur von benutzerdefinierten Elementen zu deklarieren:

<!-- Template Definition -->
<template id="fancy-element-template">
  <style>
    ...
  </style>
  <div id="container">
    <p>Some fancy markup goes here...</p>
  </div>
</template>

<!-- Custom Element usage -->
<fancy-element></fancy-element>

Mit Shadow DOM können Stile, IDs und Klassen des Inhalts für sich selbst festgelegt werden. Dies verhindert CSS-Ausblutungen oder den Zugriff auf die Interna des benutzerdefinierten Elements von außerhalb.

customElements.define('fancy-element', class extends HTMLElement {
  constructor() {
    super();
    let shadowRoot = this.attachShadow({mode: 'open'});
    const t = document.querySelector('#fancy-element-template');
    const instance = t.content.cloneNode(true);
    shadowRoot.appendChild(instance);
  }
  ...
});

Erfahren Sie mehr

Google Developers- Artikel:

• Benutzerdefinierte Elemente v1: wiederverwendbare Webkomponenten
• Shadow DOM: eigenständige Webkomponenten