CustomElementRegistry: CustomElementRegistry() Konstruktor
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Der CustomElementRegistry() Konstruktor erzeugt ein neues CustomElementRegistry Objekt für den umschlossenen Gebrauch.
Der Konstruktor wird speziell verwendet, um Bereiche einzuschränken, in denen benutzerdefinierte Elemente auf einen bestimmten Bereich, wie ein Element oder ShadowRoot, definiert werden.
Hinweis:
Das globale CustomElementRegistry Objekt, das einem Window zugeordnet ist, wird nicht mit diesem Konstruktor erstellt; es wird automatisch erstellt, wenn das Fenster eingerichtet wird, und ist über die window.customElements Eigenschaft zugänglich.
Syntax
new CustomElementRegistry()
Parameter
Keine.
Rückgabewert
Ein neues CustomElementRegistry Objekt.
Beschreibung
Wenn Sie ein CustomElementRegistry mit new CustomElementRegistry() konstruieren, wird das resultierende Verzeichnis als bereichsbezogen betrachtet. Das bedeutet:
- Benutzerdefinierte Elementdefinitionen, die mit
define()hinzugefügt werden, sind nicht global verfügbar. Sie gelten nur für Knoten, die mit diesem Verzeichnis verknüpft wurden. - Es unterstützt nicht die
extendsOption indefine()(für die Erstellung von angepassten eingebauten Elementen). Der Versuch,extendsmit einem bereichsbezogenen Verzeichnis zu verwenden, löst einenNotSupportedErrorDOMExceptionaus.
Um ein bereichsbezogenes Verzeichnis mit einem DOM-Unterbaum zu verknüpfen, können Sie die initialize() Methode verwenden, es an Element.attachShadow() übergeben oder die customElementRegistry Option der Methode Document.createElement() verwenden.
Beispiele
Erstellen eines bereichsbezogenen benutzerdefinierten Elementverzeichnisses
Dieses Beispiel erstellt ein bereichsbezogenes Verzeichnis, definiert ein benutzerdefiniertes Element darauf und übergibt das Verzeichnis an Element.attachShadow(). Wenn HTML, das <my-element> enthält, dem Shadow Root hinzugefügt wird, wird das Element mit der Definition des bereichsbezogenen Verzeichnisses 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 |