ShadowRoot: 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 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.
Value
A CustomElementRegistry object, or null.
Examples
Setting a scoped registry on a shadow root
This example creates a scoped registry with a custom element definition and passes it to Element.attachShadow(). The customElementRegistry property on the resulting shadow root reflects the scoped registry.
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!"
Specifications
| Specification |
|---|
| DOM # dom-documentorshadowroot-customelementregistry |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
customElementRegistry
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- See implementation notes.
- User must explicitly enable this feature.