はじめに
この記事ではWeb Componentsを利用する準備のためにHTML Templateを紹介する記事です。Web Componentsとは他のコードから独立して利用できる再利用可能なコンポーネント(要素)を指します。
Web Componentを利用するために必要な他の要素としてCustom Elementについての記事、Shadow DOMについての記事も書きましたので併せてご覧ください。なお、この記事ではCustom Elementは知らなくても進めることができますがShadow DOMについての知識は多少要求します。また、Web Components自体の実装はこちらの記事で行いました。
HTML Templateとは
templateとslotの二つの要素はHTMLに表示されないHTMLのテンプレートを書くことができ、それをHTML Template呼びます。Vueを触ったことがある方にとっては親近感のある要素なのではないでしょうか。JavaScriptを用いることでテンプレートは繰り返し使うことができます。
template
まずはtemplateをHTMLに埋め込むだけでは何も表示されないことを確認します。
See the Pen template01 by KokiSakano (@kokisakano) on CodePen.
次にJavaScriptを操作して、bodyにtemplateのcontentを渡してみます。
See the Pen template02 by KokiSakano (@kokisakano) on CodePen.
そのままでは表示されませんでしたが、templateの内部をとってきてbodyに追加することで表示することができました(当然と言えば当然ですが)。templateの中身をとってくるときにcloneNodeを使いました。これをしないとある場所で中身を変更すると他の場所にも変更が伝わって意図しない挙動になるからです(引数をtrueとすることでその子要素も全てコピーされます)。
templateを用いることでJavaScriptでHTMLを文字列で扱ってDOMに追加する必要がなくなりとても綺麗に書くことができました。コードの綺麗さの観点の他にも文字列をHTMLとして扱うための変換も必要なくなるのでパフォーマンス上もとても有利です。
slot
slotはtemplate内部で使用する要素です。templateの中身を追加する要素の元の中身をslotに反映することができます。Shadow DOMと一緒に使われることで効果が発動されるのでShadow DOMと合わせて紹介します。
See the Pen template03 by KokiSakano (@kokisakano) on CodePen.
templateではslotだった箇所がShadow Hostの元々の中身に置き換わっていることが確認できます。Shadow DOM化せずに行った場合はslotの箇所への置き換えが行われないことに注意して下さい。なお、slotに置き換えられた部分はShadow DOMのcssではなく、元のLight DOMのcssを参照します。
slotにname属性を設定することで複数のslotを利用することができます。埋め込むコンテンツのslot属性にslotのname属性に設定したものと同じ名前をつけることでお互いが紐づきます。
See the Pen template03 by KokiSakano (@kokisakano) on CodePen.
埋め込むコンテンツの記述した順番ではなく、指定したslotに代入されていることが確認できます。また、Shadow Treeであるtemplateの中身はShadow DOM内のstyleによって青色の文字色になっていますが、slotの部分に外部から挿入されたものはLight DOM内のstyleによって赤色の文字色になっています。
まとめ
Web Componentsを利用するために必要なHTML Templateを学びました。この機能を用いて再利用可能なHTMLのテンプレートを準備すること、Shadow DOMになる前の中身を抜き出すことができるようになります。