CustomElementRegistry接口提供注册自定义元素和查询已注册元素的方法。要获取它的实例,请使用 window.customElements属性。

方法

CustomElementRegistry.define()
定义一个新的 自定义元素
CustomElementRegistry.get()
返回指定自定义元素的构造函数,如果未定义自定义元素,则返回undefined
CustomElementRegistry.whenDefined()
返回当使用给定名称定义自定义元素时将会执行的promise。(如果已经定义了这样一个自定义元素,那么立即履行返回的 promise。)

示例

以下代码来自我们的 word-count-web-component 示例(see it live also)。 请注意我们如何使用CustomElementRegistry.define() 方法在创建其类后定义自定义元素。

// 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' });

规范

Specification Status Comment
HTML Living Standard
CustomElementRegistry
Living Standard Initial definition.

浏览器兼容

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic support
Experimental
Chrome Full support 54Edge No support No
Notes
No support No
Notes
Notes Under consideration
Firefox Full support 63
Full support 63
Full support 59
Disabled
Disabled From version 59: this feature is behind the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support ? — 59
Disabled
Disabled 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 No support NoOpera Full support 41Safari Full support 10.1WebView Android Full support 54Chrome Android Full support 54Edge Mobile No support No
Notes
No support No
Notes
Notes Under consideration
Firefox Android Full support 63
Full support 63
Full support 59
Disabled
Disabled From version 59: this feature is behind the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support ? — 59
Disabled
Disabled 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 Full support 41Safari iOS Full support 10.1Samsung Internet Android Full support 6.0
Support for Customized built-in elements
Experimental
Chrome Full support 66Edge No support NoFirefox Full support 63
Full support 63
Full support 59
Disabled
Disabled From version 59: this feature is behind the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support ? — 59
Disabled
Disabled 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 No support NoOpera Full support 53Safari No support NoWebView Android Full support 66Chrome Android Full support 66Edge Mobile No support NoFirefox Android Full support 63
Full support 63
Full support 59
Disabled
Disabled From version 59: this feature is behind the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support ? — 59
Disabled
Disabled 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 Full support 53Safari iOS No support NoSamsung Internet Android No support No
define
Experimental
Chrome Full support 66
Notes
Full support 66
Notes
Notes Support for 'Customized built-in elements' as well.
Full support 54
Notes
Notes Support for 'Autonomous custom elements' only.
Edge No support No
Notes
No support No
Notes
Notes Under consideration
Firefox Full support 63
Full support 63
Full support 59
Disabled
Disabled From version 59: this feature is behind the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support ? — 59
Disabled
Disabled 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 No support NoOpera Full support 53
Notes
Full support 53
Notes
Notes Support for 'Customized built-in elements' as well.
Full support 41
Notes
Notes Support for 'Autonomous custom elements' only.
Safari Full support 10.1
Notes
Full support 10.1
Notes
Notes Supports 'Autonomous custom elements' but not 'Customized built-in elements'
WebView Android Full support 66
Notes
Full support 66
Notes
Notes Support for 'Customized built-in elements' as well.
Full support 54
Notes
Notes Support for 'Autonomous custom elements' only.
Chrome Android Full support 66
Notes
Full support 66
Notes
Notes Support for 'Customized built-in elements' as well.
Full support 54
Notes
Notes Support for 'Autonomous custom elements' only.
Edge Mobile No support No
Notes
No support No
Notes
Notes Under consideration
Firefox Android Full support 63
Full support 63
Full support 59
Disabled
Disabled From version 59: this feature is behind the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support ? — 59
Disabled
Disabled 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 Full support 53
Notes
Full support 53
Notes
Notes Support for 'Customized built-in elements' as well.
Full support 41
Notes
Notes Support for 'Autonomous custom elements' only.
Safari iOS Full support 10.1
Notes
Full support 10.1
Notes
Notes Supports 'Autonomous custom elements' but not 'Customized built-in elements'
Samsung Internet Android Full support 6.0
Notes
Full support 6.0
Notes
Notes Support for 'Autonomous custom elements' only.
get
Experimental
Chrome Full support 66
Notes
Full support 66
Notes
Notes Support for 'Customized built-in elements' as well.
Full support 54
Notes
Notes Support for 'Autonomous custom elements' only.
Edge No support No
Notes
No support No
Notes
Notes Under consideration
Firefox Full support 63
Full support 63
Full support 59
Disabled
Disabled From version 59: this feature is behind the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support ? — 59
Disabled
Disabled 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 No support NoOpera Full support 53
Notes
Full support 53
Notes
Notes Support for 'Customized built-in elements' as well.
Full support 41
Notes
Notes Support for 'Autonomous custom elements' only.
Safari Full support 10.1
Notes
Full support 10.1
Notes
Notes Supports 'Autonomous custom elements' but not 'Customized built-in elements'
WebView Android Full support 66
Notes
Full support 66
Notes
Notes Support for 'Customized built-in elements' as well.
Full support 54
Notes
Notes Support for 'Autonomous custom elements' only.
Chrome Android Full support 66
Notes
Full support 66
Notes
Notes Support for 'Customized built-in elements' as well.
Full support 54
Notes
Notes Support for 'Autonomous custom elements' only.
Edge Mobile No support No
Notes
No support No
Notes
Notes Under consideration
Firefox Android Full support 63
Full support 63
Full support 59
Disabled
Disabled From version 59: this feature is behind the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support ? — 59
Disabled
Disabled 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 Full support 53
Notes
Full support 53
Notes
Notes Support for 'Customized built-in elements' as well.
Full support 41
Notes
Notes Support for 'Autonomous custom elements' only.
Safari iOS Full support 10.1
Notes
Full support 10.1
Notes
Notes Supports 'Autonomous custom elements' but not 'Customized built-in elements'
Samsung Internet Android Full support 6.0
Notes
Full support 6.0
Notes
Notes Support for 'Autonomous custom elements' only.
whenDefined
Experimental
Chrome Full support 66
Notes
Full support 66
Notes
Notes Support for 'Customized built-in elements' as well.
Full support 54
Notes
Notes Support for 'Autonomous custom elements' only.
Edge No support No
Notes
No support No
Notes
Notes Under consideration
Firefox Full support 63
Full support 63
Full support 59
Disabled
Disabled From version 59: this feature is behind the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support ? — 59
Disabled
Disabled 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 No support NoOpera Full support 53
Notes
Full support 53
Notes
Notes Support for 'Customized built-in elements' as well.
Full support 41
Notes
Notes Support for 'Autonomous custom elements' only.
Safari Full support 10.1
Notes
Full support 10.1
Notes
Notes Supports 'Autonomous custom elements' but not 'Customized built-in elements'
WebView Android Full support 66
Notes
Full support 66
Notes
Notes Support for 'Customized built-in elements' as well.
Full support 54
Notes
Notes Support for 'Autonomous custom elements' only.
Chrome Android Full support 66
Notes
Full support 66
Notes
Notes Support for 'Customized built-in elements' as well.
Full support 54
Notes
Notes Support for 'Autonomous custom elements' only.
Edge Mobile No support No
Notes
No support No
Notes
Notes Under consideration
Firefox Android Full support 63
Full support 63
Full support 59
Disabled
Disabled From version 59: this feature is behind the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support ? — 59
Disabled
Disabled 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 Full support 53
Notes
Full support 53
Notes
Notes Support for 'Customized built-in elements' as well.
Full support 41
Notes
Notes Support for 'Autonomous custom elements' only.
Safari iOS Full support 10.1
Notes
Full support 10.1
Notes
Notes Supports 'Autonomous custom elements' but not 'Customized built-in elements'
Samsung Internet Android Full support 6.0
Notes
Full support 6.0
Notes
Notes Support for 'Autonomous custom elements' only.

Legend

Full support  
Full support
No support  
No support
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.

文档标签和贡献者

此页面的贡献者: zhangchen, SphinxKnight, Ende93, fsx950223, xrr2016
最后编辑者: zhangchen,