Widely available すべての主要ブラウザで対応済み。安心して使用可能。

<template>

<template> は HTML の要素で、HTML のフラグメントを保持し、後で JavaScript を使用して使用したり、シャドウ DOM の中に直接生成したりするためのメカニズムとして機能します。

テキスト・構造

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
<template>
26
13
22
8
26
8
DOM API
HTMLTemplateElement

HTMLTemplateElement インターフェイスは、HTML の template 要素の内容にアクセスできるようにします。
26
13
22
8
26
8
content

HTMLTemplateElement.content プロパティは、 要素のテンプレートの内容 (DocumentFragment) を返します。
26
13
22
8
26
8
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT 
<template id="row-template">
  <tr>
    <td class="name"></td>
    <td class="email"></td>
  </tr>
</template>
<script>
  const tmpl = document.getElementById('row-template');
  const clone = tmpl.content.cloneNode(true);
  clone.querySelector('.name').textContent = '山田';
  document.querySelector('tbody').appendChild(clone);
</script>

ライブデモ

テンプレート要素の構造

template 内のコンテンツはレンダリングされない。JS でクローンして使用。

プレビュー全画面表示

リスト生成への活用

template でテーブル行のテンプレートを定義し、データから動的に生成。

プレビュー全画面表示

template の特性

template 内はパースされるがレンダリングされない。script も実行されない。

プレビュー全画面表示

実務での使いどころ

  • <template> の活用

    <template> は HTML の要素で、HTML のフラグメントを保持し、後で JavaScript を使用して使用したり、シャドウ DOM の中に直接生成したりするためのメカニズムとして機能します。

注意点

  • 古いブラウザでは対応していない場合がある。

アクセシビリティ

  • スクリーンリーダーでの読み上げを確認すること。

参考リンク