template 要素

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

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

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

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

template 要素に指定可能な属性は下記の通りです。

属性	概要
shadowrootmode 属性	宣言型 Shadow root（シャドウルート）とします。
shadowrootdelegatesfocus 属性	宣言型シャドウルートの delegatesFocus プロパティ値を true に設定します。shadowrootdelegatesfocus 属性は論理属性です。
shadowrootclonable 属性	宣言型シャドウルートの clonable プロパティ値を true に設定し、クローン（複製）可能であることを表します。shadowrootclonable 属性は論理属性です。
shadowrootserializable 属性	宣言型シャドウルートの serializable プロパティ値を true に設定します。shadowrootserializable 属性は論理属性です。

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

<script>
  const template = document.querySelector('#row');
  const data = [
    { 名前: '日本太郎', 出身地: '東京都', 性別: '男性', 年齢: 30 },
    { 名前: '日本次郎', 出身地: '長野県', 性別: '男性', 年齢: 28 },
    { 名前: '日本三郎', 出身地: '大阪府', 性別: '男性', 年齢: 24 },
    { 名前: '日本花子', 出身地: '鹿児島県', 性別: '女性', 年齢: 31 },
    { 名前: '日本富子', 出身地: '北海道', 性別: '女性', 年齢: 21 }
  ];

  for (const cat of data) {
    const clone = template.content.cloneNode(true);
    const 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>

<template shadowrootmode="open">
  <style>h2 { color: blue; }</style>
  <h2>shadow content</h2>
</template>

IE11	○
Edge（EdgeHTML）	○
Edge（Chromium）	○
Chrome	○
Firefox	○
Safari	○
iOS Safari	○
Android Chrome	○