CustomElementRegistry: initialize() Methode

Syntax

initialize(root)

Parameter

root

Ein Node-Objekt (typischerweise ein Document, ShadowRoot oder Element), dessen inklusive Nachkommen mit diesem Register assoziiert werden.

Rückgabewert

Keiner (undefined).

Ausnahmen

NotSupportedError DOMException

Wird ausgelöst, wenn dieses CustomElementRegistry nicht gescopet ist (d.h. nicht mit new CustomElementRegistry() erstellt wurde) und entweder root ein Document-Knoten ist oder roots Dokumentenknoten customElementRegistry nicht dieses CustomElementRegistry ist.

Beschreibung

Wenn initialize() aufgerufen wird, durchläuft es die inklusiven Nachkommen von root in Baumreihenfolge. Für jedes Element (oder Document/ShadowRoot an der Wurzel), das ein null customElementRegistry hat, wird das Register auf dieses CustomElementRegistry gesetzt. Anschließend wird versucht, jedes Element zu aktualisieren, dessen customElementRegistry mit diesem Register übereinstimmt.

Sobald das customElementRegistry eines Knotens auf ein CustomElementRegistry-Objekt gesetzt ist, kann es nicht mehr geändert werden. Das bedeutet, dass initialize() das Register nur für Knoten setzen kann, bei denen es noch null ist. Es wird jedoch trotzdem versucht, jedes Element zu aktualisieren, dessen customElementRegistry bereits mit diesem Register übereinstimmt, nicht nur neu zugewiesene Elemente.

Knoten haben in mehreren Situationen ein null-Custom-Element-Register, einschließlich:

• Dokumente, die durch DOMImplementation.createHTMLDocument() erstellt wurden, deren Custom-Element-Register standardmäßig null ist. Elemente, die innerhalb solcher Dokumente erstellt wurden, haben ebenfalls null Register.
• Shadow Roots, die mit customElementRegistry auf null gesetzt über Element.attachShadow() erstellt wurden.
• Deklarative Shadow Roots, die aus einem <template>-Element mit dem shadowrootcustomelementregistry-Attribut erstellt wurden, das den HTML-Parser anweist, das Custom-Element-Register des Shadow Roots als null zu belassen.

Beispiele

Initialisierung eines Shadow Roots mit einem gescopten Register

In diesem Beispiel wird ein Shadow Root ohne ein Custom-Element-Register erstellt, HTML mit einem Custom-Element hinzugefügt und dann initialize() aufgerufen, um ein gescoptes Register zu assoziieren. Das <my-element>-Element wird aktualisiert, wenn initialize() das Register auf den Shadow Root und seine Nachkommen setzt.

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);

// Create the shadow DOM structure without a registry
const shadow = host.attachShadow({
  mode: "open",
  customElementRegistry: null,
});
shadow.innerHTML = "<my-element></my-element>";

// Later, associate the scoped registry and upgrade custom elements
myRegistry.initialize(shadow);

console.log(shadow.querySelector("my-element").textContent);
// "Hello from scoped registry!"

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwendung von Custom Elements
• CustomElementRegistry() Konstruktor
• CustomElementRegistry.define()
• CustomElementRegistry.upgrade()