Custom Elements は、独自のカスタム HTML 要素を作成するための機能です。 Custom Elements は、独自のスクリプト動作と CSS スタイリングを持つことができます。これは web components 一部ですが、単独でも使用できます。

注: Custom Elements はつい最近安定したものの、MDN の一部は依然として古い仕様のドラフトからの古い API のドキュメントが含まれています。

<mytag>のようなタグ名を作成し、CSS でスタイルを設定してから、スクリプトを使用してビヘイビアを付加できたとき、新しい custom elements の機能が作成された理由は不明です。custom elements が持つ利点は、新しい要素のライフサイクルのさまざまな部分にビヘイビアの付加を可能にするライフサイクル応答です。 例えば、要素が DOM に挿入されたとき(「接続」)、DOM から削除されたとき(「切断」)、または属性が変更されたときに、別のビヘイビアを付加できます。

v1 custom elements の主要なイネーブラは CustomElementRegistry.define() メソッドで、これは新しい custom elements を定義するために使用できます。新しい要素は、デフォルトの HTMLUnknownElement ではなく、任意のインスタンスに対して指定されたクラスを使用します。 custom elements は、構文を使用して <button> のようなネイティブ要素に基づくこともできます。<button is="my-button"> は、カスタマイズされた組み込み要素と呼ばれます。

カスタム要素メソッド

Custom elements には、その振る舞いを制御する次のメソッドがあります:

constructor()
要素の作成またはアップグレード時に呼び出されます
connectedCallback()
要素がドキュメントに挿入されたときに呼び出される、シャドウツリーへの呼び出し
disconnectedCallback()
要素がドキュメントから削除されたときに呼び出されます
attributeChangedCallback(attributeName, oldValue, newValue, namespace)
要素の属性が変更、追加、削除、または置換されたときに呼び出されます。 監視対象の属性に対してのみ呼び出されます。
adoptedCallback(oldDocument, newDocument)
要素が新しい文書に採用されたときに呼び出されます

Custom elements は、最新バージョンのJavaScriptで導入された class 構文 を使用する必要があります。

HTML ファイル:

下に何も表示されない場合、ブラウザーは Custom Elements をまだサポートしていません。
<x-product data-name="Ruby" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/ruby.png" data-url="http://example.com/1"></x-product>
<x-product data-name="JavaScript" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/javascript.png" data-url="http://example.com/2"></x-product>
<x-product data-name="Python" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/python.png" data-url="http://example.com/3"></x-product>

JS ファイル:

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

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

    // Create a standard img element and set it's attributes.
    var img = document.createElement('img');
    img.alt = this.getAttribute('data-name');
    img.src = this.getAttribute('data-img');
    img.width = '150';
    img.height = '150';
    img.className = 'product-img';

    // Add the image to the shadow root.
    shadow.appendChild(img);

    // Add an event listener to the image.
    img.addEventListener('click', () => {
      window.location = this.getAttribute('data-url');
    });

    // Create a link to the product.
    var link = document.createElement('a');
    link.innerText = this.getAttribute('data-name');
    link.href = this.getAttribute('data-url');
    link.className = 'product-name';

    // Add the link to the shadow root.
    shadow.appendChild(link);
  }
}

// Define the new element
customElements.define('x-product', XProduct);

CSS ファイル:

body {
  background: #F7F7F7;
}

x-product {
  display: inline-block;
  float: left;
  margin: 0.5em;
  border-radius: 3px;
  background: #FFF;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  font-family: Helvetica, arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

x-product::slotted(.product-img) {
  cursor: pointer;
  background: #FFF;
  margin: 0.5em;
}

x-product::slotted(.product-name) {
  display: block;
  text-align: center;
  text-decoration: none;
  color: #08C;
  border-top: 1px solid #EEE;
  font-weight: bold;
  padding: 0.75em 0;
}

以下は上記のライブの例です:

観測属性

属性が変更されたときに通知を受けるには、属性名の配列を返す要素のクラスに静的な observedAttributes ゲッターを置くことによって、要素を初期化するときに観測属性のリストを定義する必要があります。

JS ファイル:

class HelloElement extends HTMLElement {
  // Monitor the 'name' attribute for changes.
  static get observedAttributes() {return ['name']; }

  // Respond to attribute changes.
  attributeChangedCallback(attr, oldValue, newValue) {
    if (attr == 'name') {
      this.textContent = `Hello, ${newValue}`;
    }
  }
}

// Define the new element
customElements.define('hello-element', HelloElement);

HTML ファイル:

<hello-element name="Anita"></hello-element>

以下は上記のライブの例です:

仕様

Custom Elements は、次の仕様で定義されています:

仕様 ステータス コメント
The HTML Standard: Custom elements LS  

ブラウザー互換性

機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基本サポート 未サポート 59.0 未サポート 47.0 10.1
カスタマイズされた組み込み要素 未サポート 59.0 未サポート 47.0 未サポート
機能 Firefox Mobile (Gecko) Chrome for Android IE Mobile Opera Mobile Safari Mobile
基本サポート 未サポート 56.0 未サポート 47.0 10.1
カスタマイズされた組み込み要素 未サポート 56.0 未サポート 47.0 未サポート

1. Firefox は about:config に "dom.webcomponents.enabled" 設定を持っていますが、true に設定しても custom elements 機能は利用できません。

リソース

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

 このページの貢献者: momdo
 最終更新者: momdo,