在此页

• 方法
• 范例
• 规范
• 浏览器兼容性
• 相关话题

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 特性。

规范

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

浏览器兼容性

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. 更新 GitHub 上的兼容性数据

	桌面						移动
	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 ) 和 preference (needs to be set to ). 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 ) 和 preference (needs to be set to ). 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 ) 和 preference (needs to be set to ). 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 ) 和 preference (needs to be set to ). 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 ) 和 preference (needs to be set to ). 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 ) 和 preference (needs to be set to ). 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 ) 和 preference (needs to be set to ). 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 ) 和 preference (needs to be set to ). 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 ) 和 preference (needs to be set to ). 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 ) 和 preference (needs to be set to ). 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.

图例

完整支持

完整支持

不支持

不支持

兼容性未知 ?

兼容性未知

实验。期望将来行为有所改变。

实验。期望将来行为有所改变。

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

元数据

• 最后修改： Jan 26, 2020

相关话题

1. 指南

   1. Using custom elements
   2. Using shadow DOM
   3. Using templates and slots
2. 接口

   1. CustomElementRegistry
   2. HTMLSlotElement
   3. HTMLTemplateElement
   4. ShadowRoot
   5. DocumentOrShadowRoot
   6. Slotable
3. 特性

   1. Element.shadowRoot
   2. Element.slot
   3. Event.composed
   4. Event.composedPath
   5. Node.isConnected
   6. Window.customElements
4. 方法

   1. Document.createElement()
   2. Element.attachShadow()
   3. Node.getRootNode()