Web Components: 組み込み要素を拡張する方法

1. はじめに
2. 組み込みHTML要素を拡張する方法
3. おわりに
4. 参考

1. はじめに

Web Components では、HTMLElement を継承してカスタムクラスを定義することもできますが、例えば「<button>を拡張したい」といった具体的な目的があるのであれば HTMLButtonElement を継承した方が便利です。

本記事では、組み込み要素を拡張したカスタム要素を作成する方法について説明します。

2. 組み込みHTML要素を拡張する方法

ここでは、例として「<button>要素を拡張する」方法を説明します。

(1) <button>を表す DOMインタフェースを探します。

Element Interfaces | HTML Standard を見ると、<button>要素の DOMインタフェースは、HTMLButtonElement であることが分かります。

(2) HTMLButtonElement を継承したカスタムクラスを定義します。

ここでは、作成するカスタムクラスをモジュールとして扱えるように、以下のようなコードを記述した my-button.js という名前のファイルを作成します。

export default class extends HTMLButtonElement {
  constructor() {
    super();
    // 省略
  }
  // 省略
};

(3) HTML側で、カスタムクラスをインポートし、カスタム要素のタグを記述します。

index.html という HTMLファイル内で、カスタム要素を使う場合、以下のような記述を行います。

<!-- カスタム要素のタグ -->
<button is="my-button">My button!</button>

<script>
// カスタムクラスをインポートします
import MyButton from './my-button.js';

// カスタムクラスにタグ名をつけます。第三引数に注意！
customElements.define('my-button', MyButton, {extends: 'button'});
</script>

このコードについて少し解説します。

まず、JavaScript コードについてですが、以下の部分では my-button.jsファイルで定義したカスタムクラスをインポートしています。

import MyButton from './my-button.js';

そして以下のコードで、このカスタムクラス（コンストラクタでもあります）に “my-button” という名前（ハイフンは必須です）をつけているのですが、第三引数で「このカスタムクラスは <button>を拡張する」ということを示す必要があります。というのも、HTML要素と DOMインタフェースは 1対1で対応しているとは限らないため、どの HTML要素を拡張したのかをブラウザにはっきり伝える必要があるのです。

customElements.define('my-button', MyButton, {extends: 'button'});

あとは、作成したボタンを配置する位置に、HTMLタグを記述するのですが、この記述にも気を付ける点があります。

<button is="my-button">My button!</button>

HTMLElement を継承したクラスを利用する場合は、define()メソッドで付けた名前のタグを記述すればよいのですが、今回のように組み込みタグを拡張した場合は、元のタグを記述します。そのタグには「define()メソッドで付けた名前をセットした is属性」を指定しなければいけません。