Web Components

はじめに

ウェブコンポーネントは次の4つで構成されます

1. カスタムタグ
2. HTMLインポート
3. templateタグ
4. シャドウDOM

すべてを使う必要はなく、使いたいものだけ使えばよいです

呼び出し側

コンポーネントを貼り付けたい場所にカスタムタグを書きます。
ここではx-tagという名前にします。カスタムタグ名にはハイフンが含まれる必要があり、閉じタグも必要です

カスタムタグ

head内でHTMLファイルを読み込みます。CORS制限があります

HTMLインポート

呼び出し側での作業は以上です。

呼び出される側

x-tag.htmlファイルを作成します。普通のHTMLファイルです。

次に、templateタグにカスタムタグの中身になるものを記述します
templateタグはどこにでも置くことができ、その内容はコメントみたいに不活性です

これは将来的にシャドウDOMとなるので、styleタグやid属性を自由に書けます

templateタグ

templateタグはブラウザに表示されません。ファイル単体で内容を確認したければ<x-tag></x-tag>をtemplateタグ外に貼り付けます

最後に、以下の3つの作業を行う必要があるので、JavaScriptを書きます

• カスタムタグを定義して登録する
• カスタムタグをシャドウDOMにする
• templateタグの中身をシャドウDOMに挿入する

作業

このJavaScriptはx-tag.htmlが読み込まれた時点で実行され、1回しか実行されません

以上が最小構成のウェブコンポーネントになります