CustomElementRegistry: CustomElementRegistry() constructor

Syntax

new CustomElementRegistry()

Parameters

None.

Return value

A new CustomElementRegistry object.

Description

When you construct a CustomElementRegistry using new CustomElementRegistry(), the resulting registry is considered scoped. This means:

• Custom element definitions added to it using define() are not globally available. They only apply to nodes that have been associated with this registry.
• It does not support the extends option in define() (for creating customized built-in elements). Attempting to use extends with a scoped registry throws a NotSupportedError DOMException.

To associate a scoped registry with a DOM subtree, you can use the initialize() method, pass it to Element.attachShadow(), or use the Document.createElement() method's customElementRegistry option.

Examples

Creating a scoped custom element registry

This example creates a scoped registry, defines a custom element on it, and passes the registry to Element.attachShadow(). When HTML containing <my-element> is added to the shadow root, the element is upgraded using the scoped registry's definition.

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

Specifications

Browser compatibility

See also

• Using custom elements
• CustomElementRegistry.initialize()
• CustomElementRegistry.define()