カスタム要素(Custom Elements)

目次

概要

カスタム要素(custom elements)は、Webコンポーネント(Web Components) と呼ばれる技術群のひとつです。JavaScript を用いて独自の要素を定義することができます。

カスタム要素のバージョンには、document.registerElement() を用いる v0 と、window.customElements() を用いる v1 がありますが、ここでは、新しい v1 について説明します。Chrome 59 や Opera 47 などでサポートされています。

カスタム要素には、新規の要素を定義する「自律カスタム要素」と、既存の要素をカスタマイズする「カスタマイズドビルトイン要素」があります。

カスタム要素名は、標準の要素名との重複を避けるために、必ずハイフン(-)を含める必要があります。

自律カスタム要素(autonomous custom element)

下記は、name 属性の値に応じて 「Hello, {name属性}!」と表示する新規のカスタム要素 <hello-element> を定義しています。

HTML
<script>
class HelloElement extends HTMLElement {
  // コンストラクタ
  // 必ず親コンストラクタ super() を呼び出すこと。
  // 属性値 _name を初期化
  constructor() {
    super();
    this._name = null;
  }

  // 監視する属性名のリストを返却する
  static get observedAttributes() {
    return ["name"];
  }

  // 監視する属性が設定・変更された際に呼び出される
  // _name 属性を変更し、レンダリングする
  attributeChangedCallback(name, oldValue, newValue) {
    this._name = newValue;
    this._updateRendering();
  }

  // 要素が挿入された際に呼び出される
  connectedCallback() {
    this._updateRendering();
  }

  // name属性のゲッター
  get name() {
    return this._name;
  }

  // name属性のセッター
  set name(v) {
    this.setAttribute("name", v);
  }

  // レンダリング
  // Hello, {name属性}! と表示する
  _updateRendering() {
    this.textContent = 'Hello, ' + this._name + '!';
  }
}

// 上記で定義したクラスを用いて、カスタム要素 <hello-element> を定義する
customElements.define("hello-element", HelloElement);
</script>

// カスタム要素を使用する
<hello-element name="Tanaka"></hello-element>
表示

カスタマイズドビルトイン要素(customized built-in element)

カスタム要素は新規に作成する他、既存の要素を拡張して作成することもできます。下記の例では、既存の button 要素に対して、plastic-button というカスタム効果を加えています。

HTML
<script>
class PlasticButton extends HTMLButtonElement {
  constructor() {
    super();
    this.addEventListener("click", () => {
      // アニメーションなどの効果を記述する
    });
  }
}
customElements.define("plastic-button", PlasticButton, { extends: "button" });
</script>

<button is="plastic-button">Click Me!</button>
Webコンポーネント, Shadow DOM, HTMLインポート, HTMLテンプレート
Copyright (C) 2017 杜甫々
初版:2017年11月19日 最終更新:2017年11月19日
https://www.tohoho-web.com/ex/custom-elements.html