Element: customElementRegistry property

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

The customElementRegistry read-only property of the Element interface returns the CustomElementRegistry object associated with this element, or null if one has not been set.

An element's customElementRegistry is set when the element is created (for example, via Document.createElement() with the customElementRegistry option, or when parsed in a context that has a scoped registry). Once set to a CustomElementRegistry object, it cannot be changed. The registry determines which custom element definitions are used when the element is upgraded.

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

const el = shadow.querySelector("my-element");
console.log(el.customElementRegistry === myRegistry); // true