The CustomElementRegistry
interface provides methods for registering custom elements and querying registered elements. To get an instance of it, use the window.customElements
property.
Methods
CustomElementRegistry.define()
- Defines a new custom element.
CustomElementRegistry.get()
- Returns the constuctor 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 var wcParent = this.parentNode; function countWords(node){ var text = node.innerText || node.textContent return text.split(/\s+/g).length; } var count = 'Words: ' + countWords(wcParent); // Create a shadow root var shadow = this.attachShadow({mode: 'open'}); // Create text node and add word count to it var text = document.createElement('span'); text.textContent = count; // Append it to the shadow root shadow.appendChild(text); // Update count when element content changes setInterval(function() { var 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
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of 'CustomElementRegistry' in that specification. |
Living Standard | Initial definition. |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
CustomElementRegistry | Chrome Full support 54 | Edge Full support 79 | Firefox
Full support
63
| IE No support No | Opera Full support 41 | Safari Full support 10.1 | WebView Android Full support 54 | Chrome Android Full support 54 | Firefox Android
Full support
63
| Opera Android Full support 41 | Safari iOS Full support 10.3 | Samsung Internet Android Full support 6.0 |
Customized built-in element support | Chrome Full support 66 | Edge Full support 79 | Firefox
Full support
63
| IE No support No | Opera Full support 53 | Safari No support No | WebView Android Full support 66 | Chrome Android Full support 66 | Firefox Android
Full support
63
| Opera Android Full support 47 | Safari iOS No support No | Samsung Internet Android Full support 9.0 |
define | Chrome
Full support
66
| Edge
Full support
79
| Firefox
Full support
63
| IE No support No | Opera
Full support
53
| Safari
Full support
10.1
| WebView Android
Full support
66
| Chrome Android
Full support
66
| Firefox Android
Full support
63
| Opera Android
Full support
47
| Safari iOS
Full support
10.3
| Samsung Internet Android
Full support
9.0
|
get | Chrome
Full support
66
| Edge
Full support
79
| Firefox
Full support
63
| IE No support No | Opera
Full support
53
| Safari
Full support
10.1
| WebView Android
Full support
66
| Chrome Android
Full support
66
| Firefox Android
Full support
63
| Opera Android
Full support
47
| Safari iOS
Full support
10.3
| Samsung Internet Android
Full support
9.0
|
upgrade | Chrome Full support 68 | Edge Full support 79 | Firefox Full support 63 | IE No support No | Opera Full support 55 | Safari ? | WebView Android Full support 68 | Chrome Android Full support 68 | Firefox Android Full support 63 | Opera Android Full support 48 | Safari iOS ? | Samsung Internet Android Full support 10.0 |
whenDefined | Chrome
Full support
66
| Edge
Full support
79
| Firefox
Full support
63
| IE No support No | Opera
Full support
53
| Safari
Full support
10.1
| WebView Android
Full support
66
| Chrome Android
Full support
66
| Firefox Android
Full support
63
| Opera Android
Full support
47
| Safari iOS
Full support
10.3
| Samsung Internet Android
Full support
9.0
|
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.