Window: customElements-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Die schreibgeschützte customElements-Eigenschaft der Window-Schnittstelle gibt eine Referenz auf das CustomElementRegistry-Objekt zurück, das verwendet werden kann, um neue benutzerdefinierte Elemente zu registrieren und Informationen über bereits registrierte benutzerdefinierte Elemente zu erhalten.

Beispiele

Das häufigste Beispiel, das man für die Nutzung dieser Eigenschaft sieht, ist der Zugriff auf die CustomElementRegistry.define()-Methode, um ein neues benutzerdefiniertes Element zu definieren und zu registrieren, z. B.:

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

Üblicherweise wird es jedoch auf etwas wie das Folgende verkürzt:

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

Siehe unser web-components-examples Repository für weitere Verwendungsbeispiele.

Spezifikationen

Specification
HTML
# dom-window-customelements

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
customElements

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support