ShadowRoot: customElementRegistry property

Limited availability

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

Want more browser support for this feature? Tell us why.

Learn more
See full compatibility

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

A shadow root's customElementRegistry determines which custom element definitions are used for upgrading elements within that shadow tree. It can be set when the shadow root is created via the customElementRegistry option of Element.attachShadow(), or later using CustomElementRegistry.initialize(). Once set to a CustomElementRegistry object, it cannot be changed.

This property is also available on Document objects via the same customElementRegistry property name.

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.customElementRegistry === myRegistry); // true
console.log(shadow.querySelector("my-element").textContent);
// "Hello from scoped registry!"