記事

<template>~</template>

template（テンプレート）要素は、複製され、スクリプトによって文書に挿入することが可能なHTMLの断片を定義します。

template要素内のコンテンツは、ページの読み込み時にはパースされますが、レンダリングツリーには直接挿入されず、JavaScriptを通じて明示的にインスタンス化されるまで表示されない。

template要素によってUIコンポーネントを定義しておくことで、JavaScriptからその内容をコピーしたり、動的にデータを挿入したりすることで、繰り返されるコンテンツなどの生成を容易に行える。

また、shadowRootMode属性によって、Shadow Root（シャドウルート）として宣言することもでき、この場合は、CSSのスコープをShadow Root内に限定するなど、UIコンポーネントの実装時に大きなメリットが享受できる。

tamplate要素で使用できる属性

グローバル属性

すべてのHTML要素で使用できる属性になります。

shadowRootMode属性

template要素に付与することで、宣言型Shadow Root（シャドウルート）とする。

shadowRootDelegatesFocus属性

属性値は論理属性。

shadowRootDelegatesFocus属性は、template要素に付与することで、delegatesFocusを設定する。

通常、フォーカスは文書の要素間を直接移動しますが、delegatesFocusがtrueに設定されているシャドウDOMが存在する場合、そのシャドウホストにフォーカスが移動すると、内部のフォーカス可能な要素（例えば、入力フィールドやボタンなど）に自動的にフォーカスが移動する。

shadowRootClonable属性

属性値は論理属性。

shadowRootClonable属性は、template要素に付与することで、Shadow root（シャドウルート）がクローン（複製）可能であることを表します。

使用例

<table>
  <tr><td>名前</td><td>出身地</td><td>性別</td><td>年齢</td></tr>
  <tbody>
    <template id="row">
      <tr><td></td><td><td><td></td></tr>
    </template>
  </tbody>
</table>

<script>
  var data = [
    { 名前: '山本太郎', 出身地: '東京都', 性別: '男性', 年齢: 30 },
    { 名前: '澤田次郎', 出身地: '長野県', 性別: '男性', 年齢: 28 },
    { 名前: '本山三郎', 出身地: '大阪府', 性別: '男性', 年齢: 24 },
    { 名前: '金沢富子', 出身地: '北海道', 性別: '女性', 年齢: 21 }
  ];
 </script>
 <script>
   var template = document.querySelector('#row');
   for (var i = 0; i < data.length; i += 1) {
   	 var cat = data[i];
   	 var clone = template.content.cloneNode(true);
   	 var cells = clone.querySelectorAll('td');
   	 cells[0].textContent = cat.名前;
   	 cells[1].textContent = cat.出身地;
   	 cells[2].textContent = cat.性別;
   	 cells[3].textContent = cat.年齢;
   	 template.parentNode.appendChild(clone);
   }
 </script>

表示