グッドプラクティス
はじめに
ウェブコンポーネントにおけるグッドプラクティスをまとめてみました。要点は次の通り
- カスタムタグ・シャドウDOM・templateタグの3つを使う。HTMLインポートは使用しない
- カスタムタグの定義はHTMLファイルに記述する
HTMLインポートは全ブラウザに実装されそうもないので、使用しないことにした。(ポリフィルも使わない)
JavaScriptにHTMLやCSSを書くのは好きになれなかったので、HTMLファイルに書くことにしました
定義ファイルの作成例
定義ファイルの作成例
ポイントは次の通りです
- 最初のtemplateタグでは
- カスタムタグのシャドウDOMへ登録する中身を記述します
- 最後のscriptタグでは
- tag.jsを読み込みます。フルパスで
- カスタムタグの登録コードを記述します。tag.define('タグ名')で登録できます
カスタムタグの登録について
カスタムタグの登録においては、tag.define()の第2引数にクラスを指定することもできます。
第2引数を省略した時は、初期値として次のようなクラスが登録されます
クラス登録例
このscriptタグに書くコードには制限があります
- 現在のドキュメントdocumentを参照しないでください
- importするファイルがあればフルパス(http～)で記述してください
現在のドキュメントは定義ファイルの呼び出し元になるので、現在のドキュメントに依存するコードが記述できません。パスも同様です
現在のドキュメントを参照できない代わりとして、tag.template('タグ名')という関数で最初のtemplate要素を取得できます。
tag.template()
URLの設定
定義ファイル(コンポーネント)を作成したら、今度はそれを読み込みます
読み込み側ではtag.jsを読み込んで、URLの設定を行う必要があります。
このURLに基づき定義ファイルがダウンロードされます
URLの設定
個別のURLが見つからなかった時にデフォルトURLが使用されます
tag.import()で読み込む
定義ファイルを読み込む方法は2パターンあり、まずはtag.import()の紹介から
tag.import()
定義ファイルの取得は非同期なのでいつ読み込まれるかは不定です。
読み込みが完了してから何かをしたい場合は customElements.whenDefined() を利用してください
tag.replace()で読み込む
定義ファイルを読み込むもう1つの方法はtag.replace()、既存のタグをカスタムタグに置換します
tag.replace()
置換例
置換の際に、カスタムタグのreplaceプロパティに置換元の要素が渡されます。次のように取得できます
置換元の要素を取得