CustomElementRegistry: CustomElementRegistry() Konstruktor
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Der CustomElementRegistry() Konstruktor erzeugt ein neues CustomElementRegistry-Objekt für die eingeschränkte Nutzung.
Der Konstruktor wird speziell verwendet, um eingeschränkte Registrierungen zu erstellen, die benutzerdefinierte Elemente auf einen bestimmten Bereich beschränken, wie z.B. ein Element oder ein ShadowRoot.
Hinweis:
Das globale CustomElementRegistry-Objekt, das mit einem Window verbunden 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 Register als eingeschränkt betrachtet. Das bedeutet:
- Benutzerdefinierte Elementdefinitionen, die mit
define()hinzugefügt werden, sind nicht global verfügbar. Sie gelten nur für Knoten, die diesem Register zugeordnet wurden. - Es unterstützt nicht die
extends-Option indefine()(zum Erstellen angepasster eingebauter Elemente). Der Versuch,extendsmit einem eingeschränkten Register zu verwenden, löst einenNotSupportedErrorDOMExceptionaus.
Um ein eingeschränktes Register mit einem DOM-Teilbaum zu verknüpfen, können Sie die Methode initialize() verwenden, es an Element.attachShadow() übergeben oder die customElementRegistry-Option der Methode Document.createElement() verwenden.
Beispiele
Erstellen eines eingeschränkten benutzerdefinierten Elementregisters
Dieses Beispiel erstellt ein eingeschränktes Register, definiert ein benutzerdefiniertes Element darauf und übergibt das Register an Element.attachShadow(). Wenn HTML, das <my-element> enthält, dem Shadow Root hinzugefügt wird, wird das Element mithilfe der Definition des eingeschränkten Registers 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
| Specification |
|---|
| HTML # dom-customelementregistry |