Window: customElements-Eigenschaft

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.

Die customElements Eigenschaft des schreibgeschützten Window Interfaces gibt eine Referenz auf das globale CustomElementRegistry Objekt zurück, welches benutzt werden kann, um neue benutzerdefinierte Elemente zu registrieren und Informationen über bereits registrierte benutzerdefinierte Elemente zu erhalten.

Das globale Register wird standardmäßig für die Registrierung von benutzerdefinierten Elementen verwendet, aber ein Shadow Root kann wählen, ein bereichsspezifisches benutzerdefiniertes Elementregister zu verwenden, um potenzielle Konflikte bei definierten Elementnamen zu vermeiden.

js
let customElementRegistry = window.customElements;
customElementRegistry.define("my-custom-element", MyCustomElement);

Beachten Sie, dass die benutzerdefinierte Elementklasse häufig direkt innerhalb des define()-Aufrufs definiert wird, wie gezeigt:

js
customElements.define(
  "element-details",
  class extends HTMLElement {
    constructor() {
      super();
      const template = document.getElementById("element-details-template");
      const shadowRoot = this.attachShadow({ mode: "open" }).appendChild(
        document.importNode(template.content, true),
      );
    }
  },
);

Siehe unser web-components-examples Repo für weitere Nutzungsbeispiele.