Window.customElements

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

構文

let customElementRegistry = window.customElements;

戻り値

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

このプロパティが使われている最も一般的な例は、新しいカスタムエレメントを定義・登録するために 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 Living Standard
window.customElements の定義
現行の標準 初期定義。

ブラウザ互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
customElementsChrome 完全対応 54Edge 未対応 なし
補足
未対応 なし
補足
補足 Under consideration
Firefox 完全対応 63
完全対応 63
未対応 59 — 63
無効
無効 From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
未対応 ? — 59
無効
無効 Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 41Safari 完全対応 10.1WebView Android 完全対応 54Chrome Android 完全対応 54Firefox Android 完全対応 63
完全対応 63
未対応 59 — 63
無効
無効 From version 59 until version 63 (exclusive): this feature is behind the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
未対応 ? — 59
無効
無効 Until version 59 (exclusive): this feature is behind the dom.webcomponents.enabled preference (needs to be set to true) and the dom.webcomponents.customelements.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 41Safari iOS 完全対応 10.1Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。