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 上檢視此頁面 • 報告此內容的錯誤