W3cubDocs

/Web APIs

CustomElementRegistry

The CustomElementRegistry interface provides methods for registering custom elements and querying registered elements. To get an instance of it, use the window.customElements property.

Instance methods

CustomElementRegistry.define()

Defines a new custom element.

CustomElementRegistry.get()

Returns the constructor for the named custom element, or undefined if the custom element is not defined.

CustomElementRegistry.upgrade()

Upgrades a custom element directly, even before it is connected to its shadow root.

CustomElementRegistry.whenDefined()

Returns an empty Promise that resolves when a custom element becomes defined with the given name. If such a custom element is already defined, the returned promise is immediately fulfilled.

Examples

The following code is taken from our word-count-web-component example (see it live also). Note how we use the CustomElementRegistry.define() method to define the custom element after creating its class.

// Create a class for the element
class WordCount extends HTMLParagraphElement {
  constructor() {
    // Always call super first in constructor
    super();

    // count words in element's parent element
    const wcParent = this.parentNode;

    function countWords(node) {
      const text = node.innerText || node.textContent;
      return text
        .trim()
        .split(/\s+/g)
        .filter((a) => a.trim().length > 0).length;
    }

    const count = `Words: ${countWords(wcParent)}`;

    // Create a shadow root
    const shadow = this.attachShadow({ mode: "open" });

    // Create text node and add word count to it
    const text = document.createElement("span");
    text.textContent = count;

    // Append it to the shadow root
    shadow.appendChild(text);

    // Update count when element content changes
    setInterval(() => {
      const count = `Words: ${countWords(wcParent)}`;
      text.textContent = count;
    }, 200);
  }
}

// Define the new element
customElements.define("word-count", WordCount, { extends: "p" });

Note: The CustomElementRegistry is available through the Window.customElements property.

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
CustomElementRegistry 54 79 63 No 41 10.1 54 54 63 41 10.3 6.0
builtin_element_support 67 79 63 No 54
NoSee bug 182671.
67 67 63 48
NoSee bug 182671.
9.0
define 54 79 63 No 41 10.1 54 54 63 41 10.3 6.0
get 54 79 63 No 41 10.1 54 54 63 41 10.3 6.0
upgrade 68 79 63 No 55 12.1 68 68 63 48 12.2 10.0
whenDefined 54 79 63 No 41 10.1 54 54 63 41 10.3 6.0

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry