--- title: Window.customElements slug: Web/API/Window/customElements tags: - API - CustomElementRegistry - Webコンポーネント - Window - custom elements - customElements - プロパティ - リファレンス translation_of: Web/API/Window/customElements ---
{{APIRef}}

{{domxref("Window")}} インターフェイスの読み取り専用 customElements プロパティは、 新しいカスタムエレメントを登録し、かつ以前に登録したカスタムエレメントに関する情報を取得する事ができる {{domxref("CustomElementRegistry")}} オブジェクトへのリファレンスを返します。

構文

let customElementRegistry = window.customElements;

戻り値

{{domxref("CustomElementRegistry")}} オブジェクトは現在の window の カスタムエレメントレジストリ を表すインスタンスです。

このプロパティが使われている最も一般的な例は、新しいカスタムエレメントを定義・登録するために {{domxref("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 リポジトリにより多くの使用例がありますのでご参照ください。

仕様

仕様 ステータス コメント
{{SpecName("HTML WHATWG", "custom-elements.html#dom-window-customelements", "window.customElements")}} {{Spec2("HTML WHATWG")}} 初期定義。

ブラウザ互換性

{{Compat("api.Window.customElements")}}