CustomElementRegistry

This translation is incomplete. Please help translate this article from English

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
La definición de 'CustomElementRegistry' en esta especificación.
Living Standard Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
CustomElementRegistry
Experimental
Chrome Soporte completo 54Edge Soporte completo 79Firefox Soporte completo 63
Soporte completo 63
Sin soporte 59 — 63
Deshabilitado
Deshabilitado From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Sin soporte ? — 59
Deshabilitado
Deshabilitado Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 41Safari Soporte completo 10.1WebView Android Soporte completo 54Chrome Android Soporte completo 54Firefox Android Soporte completo 63
Soporte completo 63
Sin soporte 59 — 63
Deshabilitado
Deshabilitado From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Sin soporte ? — 59
Deshabilitado
Deshabilitado Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 41Safari iOS Soporte completo 10.3Samsung Internet Android Soporte completo 6.0
Customized built-in element support
Experimental
Chrome Soporte completo 66Edge Soporte completo 79Firefox Soporte completo 63
Soporte completo 63
Sin soporte 59 — 63
Deshabilitado
Deshabilitado From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Sin soporte ? — 59
Deshabilitado
Deshabilitado Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 53Safari Sin soporte NoWebView Android Soporte completo 66Chrome Android Soporte completo 66Firefox Android Soporte completo 63
Soporte completo 63
Sin soporte 59 — 63
Deshabilitado
Deshabilitado From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Sin soporte ? — 59
Deshabilitado
Deshabilitado Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 47Safari iOS Sin soporte NoSamsung Internet Android Soporte completo 9.0
define
Experimental
Chrome Soporte completo 66
Notas
Soporte completo 66
Notas
Notas Support for 'Customized built-in elements' as well.
Soporte completo 54
Notas
Notas Support for 'Autonomous custom elements' only.
Edge Soporte completo 79
Notas
Soporte completo 79
Notas
Notas Support for 'Customized built-in elements' as well.
Soporte completo 79
Notas
Notas Support for 'Autonomous custom elements' only.
Firefox Soporte completo 63
Soporte completo 63
Sin soporte 59 — 63
Deshabilitado
Deshabilitado From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Sin soporte ? — 59
Deshabilitado
Deshabilitado Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 53
Notas
Soporte completo 53
Notas
Notas Support for 'Customized built-in elements' as well.
Soporte completo 41
Notas
Notas Support for 'Autonomous custom elements' only.
Safari Soporte completo 10.1
Notas
Soporte completo 10.1
Notas
Notas Supports 'Autonomous custom elements' but not 'Customized built-in elements'
WebView Android Soporte completo 66
Notas
Soporte completo 66
Notas
Notas Support for 'Customized built-in elements' as well.
Soporte completo 54
Notas
Notas Support for 'Autonomous custom elements' only.
Chrome Android Soporte completo 66
Notas
Soporte completo 66
Notas
Notas Support for 'Customized built-in elements' as well.
Soporte completo 54
Notas
Notas Support for 'Autonomous custom elements' only.
Firefox Android Soporte completo 63
Soporte completo 63
Sin soporte 59 — 63
Deshabilitado
Deshabilitado From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Sin soporte ? — 59
Deshabilitado
Deshabilitado Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 47
Notas
Soporte completo 47
Notas
Notas Support for 'Customized built-in elements' as well.
Soporte completo 41
Notas
Notas Support for 'Autonomous custom elements' only.
Safari iOS Soporte completo 10.3
Notas
Soporte completo 10.3
Notas
Notas Supports 'Autonomous custom elements' but not 'Customized built-in elements'
Samsung Internet Android Soporte completo 9.0
Notas
Soporte completo 9.0
Notas
Notas Support for 'Customized built-in elements' as well.
Soporte completo 6.0
Notas
Notas Support for 'Autonomous custom elements' only.
get
Experimental
Chrome Soporte completo 66
Notas
Soporte completo 66
Notas
Notas Support for 'Customized built-in elements' as well.
Soporte completo 54
Notas
Notas Support for 'Autonomous custom elements' only.
Edge Soporte completo 79
Notas
Soporte completo 79
Notas
Notas Support for 'Customized built-in elements' as well.
Soporte completo 79
Notas
Notas Support for 'Autonomous custom elements' only.
Firefox Soporte completo 63
Soporte completo 63
Sin soporte 59 — 63
Deshabilitado
Deshabilitado From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Sin soporte ? — 59
Deshabilitado
Deshabilitado Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 53
Notas
Soporte completo 53
Notas
Notas Support for 'Customized built-in elements' as well.
Soporte completo 41
Notas
Notas Support for 'Autonomous custom elements' only.
Safari Soporte completo 10.1
Notas
Soporte completo 10.1
Notas
Notas Supports 'Autonomous custom elements' but not 'Customized built-in elements'
WebView Android Soporte completo 66
Notas
Soporte completo 66
Notas
Notas Support for 'Customized built-in elements' as well.
Soporte completo 54
Notas
Notas Support for 'Autonomous custom elements' only.
Chrome Android Soporte completo 66
Notas
Soporte completo 66
Notas
Notas Support for 'Customized built-in elements' as well.
Soporte completo 54
Notas
Notas Support for 'Autonomous custom elements' only.
Firefox Android Soporte completo 63
Soporte completo 63
Sin soporte 59 — 63
Deshabilitado
Deshabilitado From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Sin soporte ? — 59
Deshabilitado
Deshabilitado Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 47
Notas
Soporte completo 47
Notas
Notas Support for 'Customized built-in elements' as well.
Soporte completo 41
Notas
Notas Support for 'Autonomous custom elements' only.
Safari iOS Soporte completo 10.3
Notas
Soporte completo 10.3
Notas
Notas Supports 'Autonomous custom elements' but not 'Customized built-in elements'
Samsung Internet Android Soporte completo 9.0
Notas
Soporte completo 9.0
Notas
Notas Support for 'Customized built-in elements' as well.
Soporte completo 6.0
Notas
Notas Support for 'Autonomous custom elements' only.
upgrade
Experimental
Chrome Soporte completo 68Edge Soporte completo 79Firefox Soporte completo 63IE Sin soporte NoOpera Soporte completo 55Safari ? WebView Android Soporte completo 68Chrome Android Soporte completo 68Firefox Android Soporte completo 63Opera Android Soporte completo 48Safari iOS ? Samsung Internet Android Soporte completo 10.0
whenDefined
Experimental
Chrome Soporte completo 66
Notas
Soporte completo 66
Notas
Notas Support for 'Customized built-in elements' as well.
Soporte completo 54
Notas
Notas Support for 'Autonomous custom elements' only.
Edge Soporte completo 79
Notas
Soporte completo 79
Notas
Notas Support for 'Customized built-in elements' as well.
Soporte completo 79
Notas
Notas Support for 'Autonomous custom elements' only.
Firefox Soporte completo 63
Soporte completo 63
Sin soporte 59 — 63
Deshabilitado
Deshabilitado From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Sin soporte ? — 59
Deshabilitado
Deshabilitado Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 53
Notas
Soporte completo 53
Notas
Notas Support for 'Customized built-in elements' as well.
Soporte completo 41
Notas
Notas Support for 'Autonomous custom elements' only.
Safari Soporte completo 10.1
Notas
Soporte completo 10.1
Notas
Notas Supports 'Autonomous custom elements' but not 'Customized built-in elements'
WebView Android Soporte completo 66
Notas
Soporte completo 66
Notas
Notas Support for 'Customized built-in elements' as well.
Soporte completo 54
Notas
Notas Support for 'Autonomous custom elements' only.
Chrome Android Soporte completo 66
Notas
Soporte completo 66
Notas
Notas Support for 'Customized built-in elements' as well.
Soporte completo 54
Notas
Notas Support for 'Autonomous custom elements' only.
Firefox Android Soporte completo 63
Soporte completo 63
Sin soporte 59 — 63
Deshabilitado
Deshabilitado From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Sin soporte ? — 59
Deshabilitado
Deshabilitado Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 47
Notas
Soporte completo 47
Notas
Notas Support for 'Customized built-in elements' as well.
Soporte completo 41
Notas
Notas Support for 'Autonomous custom elements' only.
Safari iOS Soporte completo 10.3
Notas
Soporte completo 10.3
Notas
Notas Supports 'Autonomous custom elements' but not 'Customized built-in elements'
Samsung Internet Android Soporte completo 9.0
Notas
Soporte completo 9.0
Notas
Notas Support for 'Customized built-in elements' as well.
Soporte completo 6.0
Notas
Notas Support for 'Autonomous custom elements' only.

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibilidad desconocida  
Compatibilidad desconocida
Experimental. Esperar que el comportamiento cambie en el futuro.
Experimental. Esperar que el comportamiento cambie en el futuro.
Ver notas de implementación.
Ver notas de implementación.
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.