CustomElementRegistry - Web API 接口参考 编辑

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

方法

CustomElementRegistry.define()

定义一个新的自定义元素。

CustomElementRegistry.get()

返回指定自定义元素的构造函数，如果未定义自定义元素，则返回undefined。

CustomElementRegistry.upgrade()

Upgrades a custom element directly, even before it is connected to its shadow root.

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

规范

规范	状态	备注
HTML Living Standard CustomElementRegistry	Living Standard	Initial definition.

浏览器兼容性

BCD tables only load in the browser

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.