<template></template>

更新日
仕様 HTML Living Standard
分類 メタデータ・コンテンツ / フロー・コンテンツ / フレージング・コンテンツ / スクリプトサポート要素
利用場所 メタデータ・コンテンツが置ける場所 / フレージング・コンテンツが置ける場所 / スクリプトサポート要素が置ける場所 / span属性がないcolgroup要素の子要素として
内容 無し（この要素内のコンテンツはスクリプトから呼び出されるだけの存在であり、template要素の子とはみなされないため）

template要素は、スクリプトで利用されるHTMLコードのテンプレートを表します。


<template>

スクリプトで利用されるテンプレート

</template>
属性 値
任意属性
shadowrootmode="" ［＋］ストリーミング宣言型Shadow Rootを有効にする open Open宣言型Shadow Rootを指定
closed Closed宣言型Shadow Rootを指定
shadowrootdelegatesfocus ［＋］宣言型Shadow Rootにデリゲートのフォーカスを設定する （shadowrootdelegatesfocus） 値は省略可能
  • 上記2つの属性については、仕様書を読んでもまったく理解できませんでした。（理解できる日が来たらこのページ内で解説させていただきます）

template要素は、JavaScriptと組み合わせて使用することになります。

例えば、表の行部分をテンプレート化すると次のようになります。（id属性を指定してスクリプトと関連付けています）

<table>

<thead>
<tr>
<th>名前</th><th>ふりがな</th><th>年齢</th></tr>
</tr>
</thead>

<tbody>

<template id="row">
<tr>
<td></td><td></td><td></td>
</tr>
</template>

</tbody>

</table>


<script>
// テンプレートを利用するスクリプト
// 対象とするtemplate要素を変数に代入
var template = document.querySelector('#row');
... 以下省略
</script>

上記のように記述することで、スクリプトがtemplate要素の内容を取得して何らかの処理を行えるようになります。

上記の場合、例えば次のような処理が行えます。

  1. スクリプトがtemplate要素の内容（<tr> ～ </tr>）を取得して複製を作成。
  2. 予め設定しておいたデータを各td要素内に挿入し、その行をtbody要素内に追加。
  3. 必要な行数分、上記の処理を繰り返す。

次の例では、リストの項目をテンプレート化しています。

<ul>

<template id="item">
<li></li>
</template>

</ul>


<script>
// テンプレートを利用するスクリプト
// 対象とするtemplate要素を変数に代入
var template = document.querySelector('#item');
... 以下省略
</script>

template要素に対応しているブラウザでは、この要素の内容はレンダリングされません。上記の <li></li> は、スクリプトに読み込まれるだけの存在となります。

  • ただし、template要素に対応していないブラウザでは、この要素の内容が表示されてしまいます。
旧HTMLからの変更点
  • HTML5：template要素が定義されました。
  • HTML5.2 or LS？：要素のコンテンツ・モデルが変更されました。
  • HTML LS：shadowrootmode属性とshadowrootdelegatesfocus属性が追加されました。［2024/01/31］

使用例

リストの項目（li要素）をテンプレート化した例

<ul>

<template id="example">
<li>template要素に対応していません</li>
</template>

</ul>


<script>

// 対象とするtemplate要素を変数に代入
var template = document.querySelector('#example');

// template要素に対応している場合は以下を実行
if ('content' in template) {

   // リストの項目となるデータを設定
   var data = ['リスト項目1','リスト項目2','リスト項目3'];

   for (var i = 0; i < data.length; i++) {

      // テンプレート（li要素）の複製を変数に代入
      var clone = template.content.cloneNode(true);

      // 複製したli要素内にデータを挿入
      clone.querySelector('li').textContent = data[i];

      // データを挿入したli要素を親要素内に追加
      template.parentNode.appendChild(clone);

   }

}

</script>
表示例
  • template要素に対応しているブラウザでは、スクリプトによって3つのリスト項目が表示されます。（JavaScriptが無効になっている場合は何も表示されません）
  • 未対応のブラウザでは、template要素の内容がそのまま表示されてしまいます。