HTML Tag Reference

template 要素

スクリプトが利用する HTML の断片

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

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

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

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

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

属性 概要
shadowrootmode 属性 宣言型 Shadow root(シャドウルート)とします。
shadowrootdelegatesfocus 属性 delegatesFocus を設定します。shadowrootdelegatesfocus 属性は論理属性です。
shadowrootclonable 属性 Shadow root(シャドウルート)がクローン(複製)可能であることを表します。shadowrootclonable 属性は論理属性です。

template 要素の仕様

コンテンツモデル
この要素を使用できる文脈
  • メタデータ・コンテンツが期待される場所
  • フレージング・コンテンツが期待される場所
  • スクリプト支援要素が期待される場所
  • span 属性を持たない colgroup 要素の直下

template 要素のサンプルソース

<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

関連する要素

用途から目的の要素を探す

用途から HTML 要素を逆引きできます。