CustomElementRegistry インターフェイスはカスタムエレメントの登録と、登録された要素を紹介するためのメソッドを提供します。このインスタンスと取得するには、window.customElements プロパティを使います。 

メソッド

CustomElementRegistry.define()
新しいカスタムエレメントを定義。
CustomElementRegistry.get()
指定されたカスタムエレメントへのコンストラクタか、またはカスタムエレメとが定義されていない場合は undefined を返す。
CustomElementRegistry.whenDefined()
名前を与えられたカスタムエレメントが定義されたとき、空の promise(resolves)を返す。もしそのようなカスタムエレメントが既に定義されていた場合、返された promise は即座に fulfill状態になります。

以下のコードは我々の word-count-web-component という例 (こちらのライブデモを見てください) から持ってきています。メモ: クラスを生成した後カスタムエレメント定義するための CustomElementRegistry.define() メソッドの使用方法。

// 要素のクラスを生成
class WordCount extends HTMLParagraphElement {
  constructor() {
    // コンストラクタ内ではまずはじめに必ず super をコールする
    super();

    // 親要素の要素内の count というワード
    var wcParent = this.parentNode;

    function countWords(node){
      var text = node.innerText || node.textContent
      return text.split(/\s+/g).length;
    }

    var count = 'Words: ' + countWords(wcParent);

    // shadow root を生成
    var shadow = this.attachShadow({mode: 'open'});

    // テキストノードを生成し、count というワードを追加
    var text = document.createElement('span');
    text.textContent = count;

    // shadow root に追加
    shadow.appendChild(text);


    // 要素のコンテンツが変化した時、count を更新
    setInterval(function() {
      var count = 'Words: ' + countWords(wcParent);
      text.textContent = count;
    }, 200)

  }
}

// 新しい要素を定義
customElements.define('word-count', WordCount, { extends: 'p' });

メモ: CustomElementsRegistry は Window.customElements プロパティを通して利用可能です。

仕様

仕様 ステータス コメント
HTML Living Standard
CustomElementRegistry の定義
現行の標準 初期定義。

ブラウザ互換性

 

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 完全対応 6.0
Customized built-in element support
実験的
Chrome 完全対応 66Edge 未対応 なし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 完全対応 53Safari 未対応 なしWebView Android 完全対応 66Chrome Android 完全対応 66Edge Mobile 未対応 なし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 完全対応 53Safari iOS 未対応 なしSamsung Internet Android 未対応 なし
define
実験的
Chrome 完全対応 66
補足
完全対応 66
補足
補足 Support for 'Customized built-in elements' as well.
完全対応 54
補足
補足 Support for 'Autonomous custom elements' only.
Edge 未対応 なし
補足
未対応 なし
補足
補足 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 完全対応 53
補足
完全対応 53
補足
補足 Support for 'Customized built-in elements' as well.
完全対応 41
補足
補足 Support for 'Autonomous custom elements' only.
Safari 完全対応 10.1
補足
完全対応 10.1
補足
補足 Supports 'Autonomous custom elements' but not 'Customized built-in elements'
WebView Android 完全対応 66
補足
完全対応 66
補足
補足 Support for 'Customized built-in elements' as well.
完全対応 54
補足
補足 Support for 'Autonomous custom elements' only.
Chrome Android 完全対応 66
補足
完全対応 66
補足
補足 Support for 'Customized built-in elements' as well.
完全対応 54
補足
補足 Support for 'Autonomous custom elements' only.
Edge 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 完全対応 53
補足
完全対応 53
補足
補足 Support for 'Customized built-in elements' as well.
完全対応 41
補足
補足 Support for 'Autonomous custom elements' only.
Safari iOS 完全対応 10.1
補足
完全対応 10.1
補足
補足 Supports 'Autonomous custom elements' but not 'Customized built-in elements'
Samsung Internet Android 完全対応 6.0
補足
完全対応 6.0
補足
補足 Support for 'Autonomous custom elements' only.
get
実験的
Chrome 完全対応 66
補足
完全対応 66
補足
補足 Support for 'Customized built-in elements' as well.
完全対応 54
補足
補足 Support for 'Autonomous custom elements' only.
Edge 未対応 なし
補足
未対応 なし
補足
補足 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 完全対応 53
補足
完全対応 53
補足
補足 Support for 'Customized built-in elements' as well.
完全対応 41
補足
補足 Support for 'Autonomous custom elements' only.
Safari 完全対応 10.1
補足
完全対応 10.1
補足
補足 Supports 'Autonomous custom elements' but not 'Customized built-in elements'
WebView Android 完全対応 66
補足
完全対応 66
補足
補足 Support for 'Customized built-in elements' as well.
完全対応 54
補足
補足 Support for 'Autonomous custom elements' only.
Chrome Android 完全対応 66
補足
完全対応 66
補足
補足 Support for 'Customized built-in elements' as well.
完全対応 54
補足
補足 Support for 'Autonomous custom elements' only.
Edge 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 完全対応 53
補足
完全対応 53
補足
補足 Support for 'Customized built-in elements' as well.
完全対応 41
補足
補足 Support for 'Autonomous custom elements' only.
Safari iOS 完全対応 10.1
補足
完全対応 10.1
補足
補足 Supports 'Autonomous custom elements' but not 'Customized built-in elements'
Samsung Internet Android 完全対応 6.0
補足
完全対応 6.0
補足
補足 Support for 'Autonomous custom elements' only.
upgrade
実験的
Chrome 完全対応 68Edge ? Firefox ? IE ? Opera 完全対応 55Safari ? WebView Android 完全対応 68Chrome Android 完全対応 68Edge Mobile ? Firefox Android ? Opera Android 完全対応 55Safari iOS ? Samsung Internet Android ?
whenDefined
実験的
Chrome 完全対応 66
補足
完全対応 66
補足
補足 Support for 'Customized built-in elements' as well.
完全対応 54
補足
補足 Support for 'Autonomous custom elements' only.
Edge 未対応 なし
補足
未対応 なし
補足
補足 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 完全対応 53
補足
完全対応 53
補足
補足 Support for 'Customized built-in elements' as well.
完全対応 41
補足
補足 Support for 'Autonomous custom elements' only.
Safari 完全対応 10.1
補足
完全対応 10.1
補足
補足 Supports 'Autonomous custom elements' but not 'Customized built-in elements'
WebView Android 完全対応 66
補足
完全対応 66
補足
補足 Support for 'Customized built-in elements' as well.
完全対応 54
補足
補足 Support for 'Autonomous custom elements' only.
Chrome Android 完全対応 66
補足
完全対応 66
補足
補足 Support for 'Customized built-in elements' as well.
完全対応 54
補足
補足 Support for 'Autonomous custom elements' only.
Edge 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 完全対応 53
補足
完全対応 53
補足
補足 Support for 'Customized built-in elements' as well.
完全対応 41
補足
補足 Support for 'Autonomous custom elements' only.
Safari iOS 完全対応 10.1
補足
完全対応 10.1
補足
補足 Supports 'Autonomous custom elements' but not 'Customized built-in elements'
Samsung Internet Android 完全対応 6.0
補足
完全対応 6.0
補足
補足 Support for 'Autonomous custom elements' only.

凡例

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

 

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

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