CustomElementRegistry

CustomElementRegistry interface provides methods for registering custom elements and querying registered elements. To get an instance of it, use the window.customElements 特性。

方法

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()
返回空 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
    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' });
					

注意: CustomElementRegistry is available through the Window.customElements 特性。

规范

规范 状态 Comment
HTML Living Standard
The definition of 'CustomElementRegistry' in that specification.
实时标准 初始定义。

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
CustomElementRegistry
Chrome 54 Edge 79 Firefox 63
63
不支持 59 — 63
Disabled
Disabled 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.
不支持 ? — 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 Opera 41 Safari 10.1 WebView Android 54 Chrome Android 54 Firefox Android 63
63
不支持 59 — 63
Disabled
Disabled 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.
不支持 ? — 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 41 Safari iOS 10.3 Samsung Internet Android 6.0
Customized built-in element support
Chrome 66 Edge 79 Firefox 63
63
不支持 59 — 63
Disabled
Disabled 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.
不支持 ? — 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 Opera 53 Safari No WebView Android 66 Chrome Android 66 Firefox Android 63
63
不支持 59 — 63
Disabled
Disabled 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.
不支持 ? — 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 47 Safari iOS No Samsung Internet Android 9.0
define
Chrome 66
66
Support for 'Customized built-in elements' as well.
54
Support for 'Autonomous custom elements' only.
Edge 79
79
Support for 'Customized built-in elements' as well.
79
Support for 'Autonomous custom elements' only.
Firefox 63
63
不支持 59 — 63
Disabled
Disabled 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.
不支持 ? — 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 Opera 53
53
Support for 'Customized built-in elements' as well.
41
Support for 'Autonomous custom elements' only.
Safari 10.1
10.1
Supports 'Autonomous custom elements' but not 'Customized built-in elements'
WebView Android 66
66
Support for 'Customized built-in elements' as well.
54
Support for 'Autonomous custom elements' only.
Chrome Android 66
66
Support for 'Customized built-in elements' as well.
54
Support for 'Autonomous custom elements' only.
Firefox Android 63
63
不支持 59 — 63
Disabled
Disabled 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.
不支持 ? — 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 47
47
Support for 'Customized built-in elements' as well.
41
Support for 'Autonomous custom elements' only.
Safari iOS 10.3
10.3
Supports 'Autonomous custom elements' but not 'Customized built-in elements'
Samsung Internet Android 9.0
9.0
Support for 'Customized built-in elements' as well.
6.0
Support for 'Autonomous custom elements' only.
get
Chrome 66
66
Support for 'Customized built-in elements' as well.
54
Support for 'Autonomous custom elements' only.
Edge 79
79
Support for 'Customized built-in elements' as well.
79
Support for 'Autonomous custom elements' only.
Firefox 63
63
不支持 59 — 63
Disabled
Disabled 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.
不支持 ? — 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 Opera 53
53
Support for 'Customized built-in elements' as well.
41
Support for 'Autonomous custom elements' only.
Safari 10.1
10.1
Supports 'Autonomous custom elements' but not 'Customized built-in elements'
WebView Android 66
66
Support for 'Customized built-in elements' as well.
54
Support for 'Autonomous custom elements' only.
Chrome Android 66
66
Support for 'Customized built-in elements' as well.
54
Support for 'Autonomous custom elements' only.
Firefox Android 63
63
不支持 59 — 63
Disabled
Disabled 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.
不支持 ? — 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 47
47
Support for 'Customized built-in elements' as well.
41
Support for 'Autonomous custom elements' only.
Safari iOS 10.3
10.3
Supports 'Autonomous custom elements' but not 'Customized built-in elements'
Samsung Internet Android 9.0
9.0
Support for 'Customized built-in elements' as well.
6.0
Support for 'Autonomous custom elements' only.
upgrade
Chrome 68 Edge 79 Firefox 63 IE No Opera 55 Safari ? WebView Android 68 Chrome Android 68 Firefox Android 63 Opera Android 48 Safari iOS ? Samsung Internet Android 10.0
whenDefined
Chrome 66
66
Support for 'Customized built-in elements' as well.
54
Support for 'Autonomous custom elements' only.
Edge 79
79
Support for 'Customized built-in elements' as well.
79
Support for 'Autonomous custom elements' only.
Firefox 63
63
不支持 59 — 63
Disabled
Disabled 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.
不支持 ? — 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 Opera 53
53
Support for 'Customized built-in elements' as well.
41
Support for 'Autonomous custom elements' only.
Safari 10.1
10.1
Supports 'Autonomous custom elements' but not 'Customized built-in elements'
WebView Android 66
66
Support for 'Customized built-in elements' as well.
54
Support for 'Autonomous custom elements' only.
Chrome Android 66
66
Support for 'Customized built-in elements' as well.
54
Support for 'Autonomous custom elements' only.
Firefox Android 63
63
不支持 59 — 63
Disabled
Disabled 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.
不支持 ? — 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 47
47
Support for 'Customized built-in elements' as well.
41
Support for 'Autonomous custom elements' only.
Safari iOS 10.3
10.3
Supports 'Autonomous custom elements' but not 'Customized built-in elements'
Samsung Internet Android 9.0
9.0
Support for 'Customized built-in elements' as well.
6.0
Support for 'Autonomous custom elements' only.

图例

完整支持
完整支持
不支持
不支持
兼容性未知
兼容性未知
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
见实现注意事项。
用户必须明确启用此特征。
用户必须明确启用此特征。