Window: customElements プロパティ

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年1月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

customElements は Window インターフェイスの読み取り専用プロパティで、グローバルな CustomElementRegistry オブジェクトへの参照を返します。これにより、新しいカスタム要素を登録したり、以前に登録したカスタム要素に関する情報を取得したりすることができます。

グローバルレジストリーはデフォルトでカスタム要素の登録に使用されますが、シャドウルートでは、定義された要素名における潜在的な衝突を避けるために、スコープ付きカスタム要素レジストリーを使用することができます。

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

なお、カスタム要素のクラスは、以下に示すように、通常は define() の呼び出しの直後に定義されます。

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

web-components-examples リポジトリーにより多くの使用例がありますので参照してください。