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.
Wert
Beispiele
Grundlegende Nutzung
Das häufigste Beispiel, das Sie für die Verwendung dieser Eigenschaft sehen werden, ist der Zugriff auf die Methode CustomElementRegistry.define(), um ein neues benutzerdefiniertes Element zu definieren und zu registrieren.
Zum Beispiel:
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:
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.
Spezifikationen
| Spezifikation |
|---|
| HTML # dom-window-customelements |