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

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

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="brush: js">let customElementRegistry = window.customElements;</pre>

<h3 id="戻り値">戻り値</h3>

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

<h2 id="Examples" name="Examples">例</h2>

<p>このプロパティが使われている最も一般的な例は、新しいカスタムエレメントを定義・登録するために {{domxref("CustomElementRegistry.define()")}} メソッドにアクセスすることです, 例えば:</p>

<pre class="brush: js">let customElementRegistry = window.customElements;
customElementRegistry.define('my-custom-element', MyCustomElement);</pre>

<p>しかし、通常は以下のように短縮されます:</p>

<pre class="brush: 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));
  }
});</pre>

<p>我々の <a href="https://github.com/mdn/web-components-examples/">web-components-examples</a> リポジトリにより多くの使用例がありますのでご参照ください。</p>

<h2 id="Specification" name="Specification">仕様</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">仕様</th>
   <th scope="col">ステータス</th>
   <th scope="col">コメント</th>
  </tr>
  <tr>
   <td>{{SpecName("HTML WHATWG", "custom-elements.html#dom-window-customelements", "window.customElements")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td>初期定義。</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ互換性</h2>

<div>


<p>{{Compat("api.Window.customElements")}}</p>
</div>