Window: customElements プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

例

このプロパティが使われている最も一般的な例は、新しいカスタム要素を定義・登録するために CustomElementRegistry.define() メソッドにアクセスすることです。例えば次のようにします。

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

しかし、ふつうは以下のように短縮します。

js
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 リポジトリーにより多くの使用例がありますので参照してください。

仕様書

Specification
HTML Standard
# dom-window-customelements

ブラウザーの互換性

BCD tables only load in the browser