HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<template>
テンプレート（Template）要素。ページロード時にレンダリングされないHTMLコンテンツを保持するために使用されます。
info
概要
<template> 要素は、ページに直接は表示されない HTMLマークアップの塊を保持するために使われます。これは、JavaScriptを使用して後からドキュメントにクローン（複製）し、挿入するための**テンプレート**として機能します。
Webコンポーネントや、大量のDOM要素を効率的に生成する際に非常に有用です。
play_circle
デモ (静的表示)
HTML (Source)
<!-- 画面には表示されません -->
<template id="my-template">
<div class="card-item">
<h3>アイテムタイトル</h3>
<p>アイテムの説明文。</p>
</div>
</template>
<!-- JavaScriptでクローンされた結果が表示される領域 -->
<div id="container">
既に表示されているコンテンツ
</div>
Preview (Result)
既に表示されているコンテンツ
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| （グローバル属性のみ） | <template> 要素固有の属性はありません。通常、JavaScriptでアクセスするために id 属性が使用されます。 |
code
実用例
1. JavaScriptによるテンプレートのクローンと挿入
<!-- テンプレートの定義 -->
<template id="item-template">
<li>リストアイテム</li>
</template>
// JavaScriptで実行
const template = document.getElementById('item-template');
const clone = template.content.cloneNode(true);
// DOMに挿入
document.getElementById('my-list').appendChild(clone);
2. Web Componentsでの利用
<!-- カスタム要素のテンプレートとして利用 -->
<template id="custom-card">
<style>
.card { border: 1px solid gray; padding: 10px; }
</style>
<div class="card">
<slot name="title">デフォルトタイトル</slot>
</div>
</template>
<!-- この要素がページに挿入されるたびに、テンプレートがクローンされます -->
<my-custom-element>
<span slot="title">カスタムタイトル</span>
</my-custom-element>
lightbulb
知っておくべき重要事項
storage
コンテンツのアクセス方法
<template> 要素の内容は、その content プロパティ（template.content）を通じてのみJavaScriptでアクセスできます。このプロパティは、要素内のノードを含む**DocumentFragment**を返します。
visibility_off
レンダリングとリソースの扱い
テンプレートの内容は、ページロード時にレンダリングされません。つまり、その中の画像 (
テンプレートの内容は、ページロード時にレンダリングされません。つまり、その中の画像 (
<img>) や音声 (<audio>) などのリソースは、テンプレートがアクティブになる（クローンされてDOMに挿入される）までフェッチされません。これにより、パフォーマンスが向上します。