CustomElementRegistry

Diese Übersetzung ist unvollständig. Bitte helfen Sie uns, diesen Artikel aus dem Englischen zu übersetzen

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
Die Definition von 'CustomElementRegistry' in dieser Spezifikation.
Lebender Standard Initial definition.

Browser compatibility

 

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
CustomElementRegistry
Experimentell
Chrome Vollständige Unterstützung 54Edge Vollständige Unterstützung 79Firefox Vollständige Unterstützung 63
Vollständige Unterstützung 63
Keine Unterstützung 59 — 63
Deaktiviert
Deaktiviert 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.
Keine Unterstützung ? — 59
Deaktiviert
Deaktiviert 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 Keine Unterstützung NeinOpera Vollständige Unterstützung 41Safari Vollständige Unterstützung 10.1WebView Android Vollständige Unterstützung 54Chrome Android Vollständige Unterstützung 54Firefox Android Vollständige Unterstützung 63
Vollständige Unterstützung 63
Keine Unterstützung 59 — 63
Deaktiviert
Deaktiviert 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.
Keine Unterstützung ? — 59
Deaktiviert
Deaktiviert 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 Vollständige Unterstützung 41Safari iOS Vollständige Unterstützung 10.3Samsung Internet Android Vollständige Unterstützung 6.0
Customized built-in element support
Experimentell
Chrome Vollständige Unterstützung 66Edge Vollständige Unterstützung 79Firefox Vollständige Unterstützung 63
Vollständige Unterstützung 63
Keine Unterstützung 59 — 63
Deaktiviert
Deaktiviert 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.
Keine Unterstützung ? — 59
Deaktiviert
Deaktiviert 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 Keine Unterstützung NeinOpera Vollständige Unterstützung 53Safari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 66Chrome Android Vollständige Unterstützung 66Firefox Android Vollständige Unterstützung 63
Vollständige Unterstützung 63
Keine Unterstützung 59 — 63
Deaktiviert
Deaktiviert 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.
Keine Unterstützung ? — 59
Deaktiviert
Deaktiviert 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 Vollständige Unterstützung 47Safari iOS Keine Unterstützung NeinSamsung Internet Android Vollständige Unterstützung 9.0
define
Experimentell
Chrome Vollständige Unterstützung 66
Hinweise
Vollständige Unterstützung 66
Hinweise
Hinweise Support for 'Customized built-in elements' as well.
Vollständige Unterstützung 54
Hinweise
Hinweise Support for 'Autonomous custom elements' only.
Edge Vollständige Unterstützung 79
Hinweise
Vollständige Unterstützung 79
Hinweise
Hinweise Support for 'Customized built-in elements' as well.
Vollständige Unterstützung 79
Hinweise
Hinweise Support for 'Autonomous custom elements' only.
Firefox Vollständige Unterstützung 63
Vollständige Unterstützung 63
Keine Unterstützung 59 — 63
Deaktiviert
Deaktiviert 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.
Keine Unterstützung ? — 59
Deaktiviert
Deaktiviert 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 Keine Unterstützung NeinOpera Vollständige Unterstützung 53
Hinweise
Vollständige Unterstützung 53
Hinweise
Hinweise Support for 'Customized built-in elements' as well.
Vollständige Unterstützung 41
Hinweise
Hinweise Support for 'Autonomous custom elements' only.
Safari Vollständige Unterstützung 10.1
Hinweise
Vollständige Unterstützung 10.1
Hinweise
Hinweise Supports 'Autonomous custom elements' but not 'Customized built-in elements'
WebView Android Vollständige Unterstützung 66
Hinweise
Vollständige Unterstützung 66
Hinweise
Hinweise Support for 'Customized built-in elements' as well.
Vollständige Unterstützung 54
Hinweise
Hinweise Support for 'Autonomous custom elements' only.
Chrome Android Vollständige Unterstützung 66
Hinweise
Vollständige Unterstützung 66
Hinweise
Hinweise Support for 'Customized built-in elements' as well.
Vollständige Unterstützung 54
Hinweise
Hinweise Support for 'Autonomous custom elements' only.
Firefox Android Vollständige Unterstützung 63
Vollständige Unterstützung 63
Keine Unterstützung 59 — 63
Deaktiviert
Deaktiviert 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.
Keine Unterstützung ? — 59
Deaktiviert
Deaktiviert 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 Vollständige Unterstützung 47
Hinweise
Vollständige Unterstützung 47
Hinweise
Hinweise Support for 'Customized built-in elements' as well.
Vollständige Unterstützung 41
Hinweise
Hinweise Support for 'Autonomous custom elements' only.
Safari iOS Vollständige Unterstützung 10.3
Hinweise
Vollständige Unterstützung 10.3
Hinweise
Hinweise Supports 'Autonomous custom elements' but not 'Customized built-in elements'
Samsung Internet Android Vollständige Unterstützung 9.0
Hinweise
Vollständige Unterstützung 9.0
Hinweise
Hinweise Support for 'Customized built-in elements' as well.
Vollständige Unterstützung 6.0
Hinweise
Hinweise Support for 'Autonomous custom elements' only.
get
Experimentell
Chrome Vollständige Unterstützung 66
Hinweise
Vollständige Unterstützung 66
Hinweise
Hinweise Support for 'Customized built-in elements' as well.
Vollständige Unterstützung 54
Hinweise
Hinweise Support for 'Autonomous custom elements' only.
Edge Vollständige Unterstützung 79
Hinweise
Vollständige Unterstützung 79
Hinweise
Hinweise Support for 'Customized built-in elements' as well.
Vollständige Unterstützung 79
Hinweise
Hinweise Support for 'Autonomous custom elements' only.
Firefox Vollständige Unterstützung 63
Vollständige Unterstützung 63
Keine Unterstützung 59 — 63
Deaktiviert
Deaktiviert 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.
Keine Unterstützung ? — 59
Deaktiviert
Deaktiviert 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 Keine Unterstützung NeinOpera Vollständige Unterstützung 53
Hinweise
Vollständige Unterstützung 53
Hinweise
Hinweise Support for 'Customized built-in elements' as well.
Vollständige Unterstützung 41
Hinweise
Hinweise Support for 'Autonomous custom elements' only.
Safari Vollständige Unterstützung 10.1
Hinweise
Vollständige Unterstützung 10.1
Hinweise
Hinweise Supports 'Autonomous custom elements' but not 'Customized built-in elements'
WebView Android Vollständige Unterstützung 66
Hinweise
Vollständige Unterstützung 66
Hinweise
Hinweise Support for 'Customized built-in elements' as well.
Vollständige Unterstützung 54
Hinweise
Hinweise Support for 'Autonomous custom elements' only.
Chrome Android Vollständige Unterstützung 66
Hinweise
Vollständige Unterstützung 66
Hinweise
Hinweise Support for 'Customized built-in elements' as well.
Vollständige Unterstützung 54
Hinweise
Hinweise Support for 'Autonomous custom elements' only.
Firefox Android Vollständige Unterstützung 63
Vollständige Unterstützung 63
Keine Unterstützung 59 — 63
Deaktiviert
Deaktiviert 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.
Keine Unterstützung ? — 59
Deaktiviert
Deaktiviert 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 Vollständige Unterstützung 47
Hinweise
Vollständige Unterstützung 47
Hinweise
Hinweise Support for 'Customized built-in elements' as well.
Vollständige Unterstützung 41
Hinweise
Hinweise Support for 'Autonomous custom elements' only.
Safari iOS Vollständige Unterstützung 10.3
Hinweise
Vollständige Unterstützung 10.3
Hinweise
Hinweise Supports 'Autonomous custom elements' but not 'Customized built-in elements'
Samsung Internet Android Vollständige Unterstützung 9.0
Hinweise
Vollständige Unterstützung 9.0
Hinweise
Hinweise Support for 'Customized built-in elements' as well.
Vollständige Unterstützung 6.0
Hinweise
Hinweise Support for 'Autonomous custom elements' only.
upgrade
Experimentell
Chrome Vollständige Unterstützung 68Edge Vollständige Unterstützung 79Firefox Vollständige Unterstützung 63IE Keine Unterstützung NeinOpera Vollständige Unterstützung 55Safari ? WebView Android Vollständige Unterstützung 68Chrome Android Vollständige Unterstützung 68Firefox Android Vollständige Unterstützung 63Opera Android Vollständige Unterstützung 48Safari iOS ? Samsung Internet Android Vollständige Unterstützung 10.0
whenDefined
Experimentell
Chrome Vollständige Unterstützung 66
Hinweise
Vollständige Unterstützung 66
Hinweise
Hinweise Support for 'Customized built-in elements' as well.
Vollständige Unterstützung 54
Hinweise
Hinweise Support for 'Autonomous custom elements' only.
Edge Vollständige Unterstützung 79
Hinweise
Vollständige Unterstützung 79
Hinweise
Hinweise Support for 'Customized built-in elements' as well.
Vollständige Unterstützung 79
Hinweise
Hinweise Support for 'Autonomous custom elements' only.
Firefox Vollständige Unterstützung 63
Vollständige Unterstützung 63
Keine Unterstützung 59 — 63
Deaktiviert
Deaktiviert 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.
Keine Unterstützung ? — 59
Deaktiviert
Deaktiviert 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 Keine Unterstützung NeinOpera Vollständige Unterstützung 53
Hinweise
Vollständige Unterstützung 53
Hinweise
Hinweise Support for 'Customized built-in elements' as well.
Vollständige Unterstützung 41
Hinweise
Hinweise Support for 'Autonomous custom elements' only.
Safari Vollständige Unterstützung 10.1
Hinweise
Vollständige Unterstützung 10.1
Hinweise
Hinweise Supports 'Autonomous custom elements' but not 'Customized built-in elements'
WebView Android Vollständige Unterstützung 66
Hinweise
Vollständige Unterstützung 66
Hinweise
Hinweise Support for 'Customized built-in elements' as well.
Vollständige Unterstützung 54
Hinweise
Hinweise Support for 'Autonomous custom elements' only.
Chrome Android Vollständige Unterstützung 66
Hinweise
Vollständige Unterstützung 66
Hinweise
Hinweise Support for 'Customized built-in elements' as well.
Vollständige Unterstützung 54
Hinweise
Hinweise Support for 'Autonomous custom elements' only.
Firefox Android Vollständige Unterstützung 63
Vollständige Unterstützung 63
Keine Unterstützung 59 — 63
Deaktiviert
Deaktiviert 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.
Keine Unterstützung ? — 59
Deaktiviert
Deaktiviert 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 Vollständige Unterstützung 47
Hinweise
Vollständige Unterstützung 47
Hinweise
Hinweise Support for 'Customized built-in elements' as well.
Vollständige Unterstützung 41
Hinweise
Hinweise Support for 'Autonomous custom elements' only.
Safari iOS Vollständige Unterstützung 10.3
Hinweise
Vollständige Unterstützung 10.3
Hinweise
Hinweise Supports 'Autonomous custom elements' but not 'Customized built-in elements'
Samsung Internet Android Vollständige Unterstützung 9.0
Hinweise
Vollständige Unterstützung 9.0
Hinweise
Hinweise Support for 'Customized built-in elements' as well.
Vollständige Unterstützung 6.0
Hinweise
Hinweise Support for 'Autonomous custom elements' only.

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Experimentell. Das Verhalten kann sich zukünftig ändern.
Experimentell. Das Verhalten kann sich zukünftig ändern.
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Benutzer muss dieses Feature explizit aktivieren.
Benutzer muss dieses Feature explizit aktivieren.