Web Components <x-piano> v2.0.0 をリリースしました

1. Overview

Web Components である, <x-piano> v2.0.0 をリリースしました. v2.0.0 では, 以下の API で構成されています.

  • Shadow DOM v1
  • Custom Elements v1
  • ESModules

* Web Components を構成する API には HTML Templates も含まれますが, <x-piano> では利用していないので, 割愛します.

ちなみに, v1.x.x までは以下の API で構成されていました.

  • Shadow DOM v0
  • Custom Elements v0
  • HTML Imports

詳細な仕様は, Web Fundamentals などに記載されていますので, <x-piano> v2.0.0 のコードを例に, それぞれの API がどのようになっているかを簡単に解説します.

2. Shadow DOM v1

Shadow DOM とは, ツールや命名規則がなくても, Vanilla JavaScript で CSS とマークアップをバンドルし, 実装の詳細を非表示にして, 自己完結型 (例えば, document.querySelector は, コンポーネントの Shadow DOM 内のノードを返しません) のコンポーネントを作成するための API です. 詳細は, 最後のセクションのリファレンスを参考にしてください.

Shadow DOM v0 では, createShadowRoot メソッドを利用して, Shadow Root を生成していましたが, v1 では, 以下のようなコードになります (<x-piano> v2.0.0 より).

export default class Piano extends HTMLElement {
    /** @override */
    constructor() {
        super();

        this.attachShadow({ mode : 'open' });
    }

    render() {
        this.shadowRoot.innerHTML = `...`
    }
        }

まず, HTMMLElement を継承したクラスを実装します. そして, attachShadow メソッドに, 引数 { mode : ‘open’ } を指定することで, Shadow Root が生成されます. あとは, Shadow DOM を生成するために innerHTML (や, appendChild) などの DOM 操作のメソッドを利用します.

3. Custom Elements v1

Custom Elements とは, その名前のとおり, 新しい HTML タグを作成したり, 既存の HTML タグを拡張したりするための API です. 詳細は, 最後のセクションのリファレンスを参考にしてください.

Custom Elements v0 では, document.registerElement というメソッドを利用して, Custome Elements を定義していましたが, Custom Elements v1 では, 以下のようなコードになります (<x-piano> v2.0.0 より).

export default class Piano extends HTMLElement {
    static get observedAttributes() {
        return [
            'ui-only',
            'type',
            'volume',
            'transpose',
            'glide',
            'attack',
            'decay',
            'sustain',
            'release'
        ];
    }

    constructor() {
        // 要素のインスタンスが作成またはアップグレードされたとき. 状態の初期化, イベントリスナーの設定, または, Shadow DOM の作成に利用します.
    }

    connectedCallback() {
        // 要素が DOM に挿入されるたびに呼び出されます. リソースの取得やレンダリングなどの, セットアップコードの実行に利用します.
    }

    disconnectedCallback() {
        // 要素が DOM から削除されるたびに呼び出されます. クリーンアップ コードの実行 (イベント リスナーの削除など) に利用します.
    }

    attributeChangedCallback() {
        // 属性が追加, 削除, 更新, または, 置換されたときに呼び出されます. また, そのためには, 対象の属性を指定する static get observedAttributes メソッドの実装が必要です.
    }
}

window.customElements.define('x-piano', Piano);

まずは, 拡張したい HTMLElement (例えば, HTMLButtonElement など) を指定して, クラスを実装します. あとは, window.customElements.define メソッドを利用して, タグ名を第 1 引数に, 対象のクラスを第 2 引数に指定して, Custom Elements を定義するだけです. これだけで, 最低限の実装は完了です. あとは, 必要に応じて, constructor や callback となるメソッドを実装するだけです.

4. ESModules

旧仕様の Web Components では, Custom Elements などを定義したファイルを読み込むには, HTML Imports という API を利用していましたが, 現在の仕様では, ESModules を利用するようになっています. API は非常に簡単で, script タグの type 属性に module を指定するだけです. また, ESModules に対応していないブラウザのために, nomodule 属性を利用した script タグも用意して, webpack などでバンドルしたフォールバックのスクリプトを読み込ませておきます. 具体的なコードは, 以下のようになります (<x-piano> v2.0.0 より).
定義した Custom Elements などを利用したい HTML のファイルで,

<script type="module" src="src/components/index.js"></script>
 <script nomodule src="build/app.js"></script>

のように, script タグを記述します.

5. References

コメントを残す