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 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 54Edge 未対応 なし
補足
未対応 なし
補足
補足 Under consideration
Firefox 完全対応 63
完全対応 63
完全対応 59
無効
無効 From version 59: 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 完全対応 54Edge Mobile 未対応 なし
補足
未対応 なし
補足
補足 Under consideration
Firefox Android 完全対応 63
完全対応 63
完全対応 59
無効
無効 From version 59: 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 ?

凡例

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

ドキュメントのタグと貢献者

このページの貢献者: k-kuwahara
最終更新者: k-kuwahara,