Window：customElements 属性

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流浏览器均已支持。

Window 接口的只读属性 customElements 返回一个指向 CustomElementRegistry 对象的引用，该对象可用于注册新的自定义元素和获取有关先前注册的自定义元素的信息。

示例

您将看到的该属性最常见的用法是访问 CustomElementRegistry.define() 方法来定义和注册一个新的自定义元素，例如：

let customElementRegistry = window.customElements;
customElementRegistry.define("my-custom-element", MyCustomElement);

然而，它通常被简化为如下形式：

customElements.define(
  "element-details",
  class extends HTMLElement {
    constructor() {
      super();
      const template = document.getElementById(
        "element-details-template",
      ).content;
      const shadowRoot = this.attachShadow({ mode: "open" }).appendChild(
        template.cloneNode(true),
      );
    }
  },
);

有关更多用法示例，请参阅我们的 web-components-examples 仓库。

规范

规范
HTML # dom-window-customelements

浏览器兼容性

帮助改进 MDN

了解如何贡献

此页面最后修改于 2023 年 12 月 8 日，由 MDN 贡献者更新。

在 GitHub 上查看此页面 • 报告此内容的错误