この翻訳は不完全です。英語から この記事を翻訳 してください。

CustomElementRegistry インターフェイスの define() メソッドは、新しいカスタムエレメントを定義します。

作成することができるのは、次の2種類のカスタムエレメントです。

  • 自律的カスタムエレメント (Autonomous custom element): スタンドアロンの独立したエレメントで、ビルトインの HTML 要素を継承していません。
  • カスタムビルトインエレメント (Customized built-in element): ビルトインの HTML 要素を継承し、拡張を加えたエレメントです。

構文

customElements.define(name, constructor, options);

パラメータ

name
新しいカスタムエレメントの名前。カスタムエレメントの名前には、少なくとも1つのハイフンが含まれなければならないことに注意してください。
constructor
新しいカスタムエレメントのコンストラクタ
options Optional
エレメントの定義の仕方を制御するオブジェクト。現在は、次の1つのオプションのみサポートされています。
  • extends: 拡張するビルトイン要素の名前を示す文字列。カスタムビルトインエレメントを作成するのに使われる。

返り値

なし。

例外

例外 説明
NotSupportedError The CustomElementRegistry already contains an entry with the same name or the same constructor (or is otherwise already defined), or extends is specified and it is a valid custom element name, or extends is specified but the element it is trying to extend is an unknown element.
SyntaxError The provided name is not a valid custom element name.
TypeError The referenced constructor is not a constructor.

注意: NotSupportedError 例外が多く発生する場合、define() が失敗しているように思えるかもしれませんが、多くの場合 Element.attachShadow() に問題があります。

自律的カスタムエレメント (Autonomous custom element)

The following code is taken from our popup-info-box-web-component example (see it live also).

// Create a class for the element
class PopUpInfo extends HTMLElement {
  constructor() {
    // Always call super first in constructor
    super();

    // Create a shadow root
    var shadow = this.attachShadow({mode: 'open'});

    // Create spans
    var wrapper = document.createElement('span');
    wrapper.setAttribute('class','wrapper');
    var icon = document.createElement('span');
    icon.setAttribute('class','icon');
    icon.setAttribute('tabindex', 0);
    var info = document.createElement('span');
    info.setAttribute('class','info');

    // Take attribute content and put it inside the info span
    var text = this.getAttribute('text');
    info.textContent = text;

    // Insert icon
    var imgUrl;
    if(this.hasAttribute('img')) {
      imgUrl = this.getAttribute('img');
    } else {
      imgUrl = 'img/default.png';
    }
    var img = document.createElement('img');
    img.src = imgUrl;
    icon.appendChild(img);

    // Create some CSS to apply to the shadow dom
    var style = document.createElement('style');

    style.textContent = '.wrapper {' +
                           'position: relative;' +
                        '}' +

                         '.info {' +
                            'font-size: 0.8rem;' +
                            'width: 200px;' +
                            'display: inline-block;' +
                            'border: 1px solid black;' +
                            'padding: 10px;' +
                            'background: white;' +
                            'border-radius: 10px;' +
                            'opacity: 0;' +
                            'transition: 0.6s all;' +
                            'position: absolute;' +
                            'bottom: 20px;' +
                            'left: 10px;' +
                            'z-index: 3;' +
                          '}' +

                          'img {' +
                            'width: 1.2rem' +
                          '}' +

                          '.icon:hover + .info, .icon:focus + .info {' +
                            'opacity: 1;' +
                          '}';

    // attach the created elements to the shadow dom

    shadow.appendChild(style);
    shadow.appendChild(wrapper);
    wrapper.appendChild(icon);
    wrapper.appendChild(info);
  }
}

// Define the new element
customElements.define('popup-info', PopUpInfo);
<popup-info img="img/alt.png" text="Your card validation code (CVC) is an extra
                                    security feature — it is the last 3 or 4 
                                    numbers on the back of your card.">

注意: Constructors for autonomous custom elements must extend HTMLElement.

カスタムビルトインエレメント

The following code is taken from our word-count-web-component example (see it live also).

// Create a class for the element
class WordCount extends HTMLParagraphElement {
  constructor() {
    // Always call super first in constructor
    super();

    // count words in element's parent element
    var wcParent = this.parentNode;

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

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

    // Create a shadow root
    var shadow = this.attachShadow({mode: 'open'});

    // Create text node and add word count to it
    var text = document.createElement('span');
    text.textContent = count;

    // Append it to the shadow root
    shadow.appendChild(text);


    // Update count when element content changes
    setInterval(function() {
      var count = 'Words: ' + countWords(wcParent);
      text.textContent = count;
    }, 200)

  }
}

// Define the new element
customElements.define('word-count', WordCount, { extends: 'p' });
<p is="word-count"></p>

仕様

仕様 状態 コメント
HTML Living Standard
customElements.define() の定義
現行の標準 Initial definition.

ブラウザ互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
define
実験的
Chrome 完全対応 66
補足
完全対応 66
補足
補足 Support for 'Customized built-in elements' as well.
完全対応 54
補足
補足 Support for 'Autonomous custom elements' only.
Edge 未対応 なし
補足
未対応 なし
補足
補足 In Development
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 完全対応 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.
Firefox 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 完全対応 47
補足
完全対応 47
補足
補足 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.

凡例

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

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

このページの貢献者: mdnwebdocs-bot, shuuji3
最終更新者: mdnwebdocs-bot,