📚

【JavaScript】カスタム要素(Web Components) 入門編

2023/03/29に公開

この記事では、カスタム要素の初歩的な内容についてまとめていきます。

カスタム要素とは

Shopifyでは、

<sticly-header> </sticky-header>

のように、標準のHTML要素ではない要素がところどころ見受けられます。

これは、カスタム要素と呼ばれるものです。

Shopifyのカスタム要素例

<cart-notification> </cart-notification>
<cart-items> </cart-items>
<localization-form> </localization-form>

カスタム要素とは、独自のメソッドやプロパティやイベントなどを持ち、独自のクラスで記述されたものです。

標準のHTML要素と区別させるため、カスタム要素は名前にハイフン(-)が含まれています。

カスタム要素の名前(例)

<my-element> </my-element>

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

この記事では、自律カスタム要素について説明します。

カスタム要素の実装方法は、
1：カスタム要素の定義
→ HTMLElement クラス（インターフェース）を拡張
2：カスタム要素を登録
→ customelements.define()メソッドを用いて定義
の順番で行います。

カスタム要素の定義

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.textContent = "カスタム要素です";
  }
}

カスタム要素を登録

customelements.define("my-element", MyElement)
//<my-element>要素とMyElementクラスを関連付ける

これにて、HTML要素の

<my-element></my-element>

は、以下のように出力されます。

<my-element>カスタム要素です</my-element>

ほかにもライフサイクルフックなどがありますが、別の記事で紹介していきます。