The CustomElementRegistry
interface provides methods for registering custom elements and querying registered elements. To get an instance of it, use the window.customElements
property.
The CustomElementRegistry
interface provides methods for registering custom elements and querying registered elements. To get an instance of it, use the window.customElements
property.
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.
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.
Specification |
---|
HTML Standard # custom-elements-api |
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