CustomElementRegistry: CustomElementRegistry()-Konstruktor
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Want more browser support for this feature? Tell us why.
Der CustomElementRegistry()-Konstruktor erstellt ein neues CustomElementRegistry-Objekt zur bereichsbezogenen Verwendung.
Der Konstruktor wird speziell zum Erstellen bereichsbezogener Registrierungen benutzerdefinierter Elemente verwendet, die Definitionen von benutzerdefinierten Elementen auf einen bestimmten Bereich beschränken, beispielsweise ein Element oder einen ShadowRoot.
Hinweis:
Das globale CustomElementRegistry-Objekt, das einem Window zugeordnet ist, wird nicht mit diesem Konstruktor erstellt; es wird beim Einrichten des Fensters automatisch erstellt und ist über die Eigenschaft window.customElements zugänglich.
Syntax
new CustomElementRegistry()
Parameter
Keine.
Rückgabewert
Ein neues CustomElementRegistry-Objekt.
Beschreibung
Wenn Sie eine CustomElementRegistry mit new CustomElementRegistry() erstellen, wird die resultierende Registrierung als bereichsbezogen betrachtet. Das bedeutet:
- Definitionen benutzerdefinierter Elemente, die mit
define()hinzugefügt werden, sind nicht global verfügbar. Sie gelten nur für Knoten, die dieser Registrierung zugeordnet wurden. - Sie unterstützt die Option
extendsindefine()nicht (zum Erstellen angepasster integrierter Elemente). Der Versuch,extendsmit einer bereichsbezogenen Registrierung zu verwenden, löst eineNotSupportedError-DOMExceptionaus.
Um eine bereichsbezogene Registrierung mit einem DOM-Teilbaum zu verknüpfen, können Sie die Methode initialize() verwenden, sie an Element.attachShadow() übergeben oder die Option customElementRegistry der Methode Document.createElement() verwenden.
Beispiele
Erstellen einer bereichsbezogenen Registrierung benutzerdefinierter Elemente
Dieses Beispiel erstellt eine bereichsbezogene Registrierung, definiert darin ein benutzerdefiniertes Element und übergibt die Registrierung an Element.attachShadow(). Wenn HTML mit <my-element> zum Shadow Root hinzugefügt wird, wird das Element mithilfe der Definition der bereichsbezogenen Registrierung aktualisiert.
const myRegistry = new CustomElementRegistry();
myRegistry.define(
"my-element",
class extends HTMLElement {
connectedCallback() {
this.textContent = "Hello from scoped registry!";
}
},
);
const host = document.createElement("div");
document.body.appendChild(host);
const shadow = host.attachShadow({
mode: "open",
customElementRegistry: myRegistry,
});
shadow.innerHTML = "<my-element></my-element>";
console.log(shadow.querySelector("my-element").textContent);
// "Hello from scoped registry!"
Spezifikationen
| Spezifikation |
|---|
| HTML # dom-customelementregistry |