プログラミング

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

投稿日:2019年12月18日 更新日:

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属性」を指定しなければいけません。

3. おわりに

HTMLElement を継承する場合に比べると、 組み込みHTMLタグを拡張する方法には気を付けなければいけないポイントが少し増えます。忘れてしまったときには、この記事を見直す予定です。

4. 参考

Web Components

Web Components: カスタム属性の利用方法

2019.12.18
Web Components

Web Components: Shadow DOM に HTML と CSS をセットするいろいろな方法

2019.12.17
Web Components

Web Components の Slot について

2019.12.17

📂-プログラミング
-

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Web Components

Web Components のサンプルコード

Web Components を使ったサンプルコードを紹介します。

Web Workers API を使ったサンプル

Web Workers API を使ったサンプルページです。 目次1. デモページ2. 画面イメージ3. ソースコード4. 参考 1. デモページ デモページ 🔗 Web Worker …

Redux

Redux の非同期処理サンプルページを作りました

Redux で非同期処理を行うサンプルページを作りました。 目次1. スクリーンショット2. デモページ3. 動作4. ソースコード5. 参考情報 1. スクリーンショット スクリーンショット 2. …

Python

Pythonのバージョンを切り替える pyenv の使い方

Pythonのバージョンを切り替える pyenv の使い方について説明します。

JavaScript でスロットマシーンを作ってみました

JavaScript でスロットマシーンを作ってみました。 目次1. スクリーンショット2. デモページ3. 内容4. ソースコード5. 参考情報 1. スクリーンショット スクリーンショット 2. …