<template></template>
更新日 | |
---|---|
仕様 | HTML Living Standard |
分類 | メタデータ・コンテンツ / フロー・コンテンツ / フレージング・コンテンツ / スクリプトサポート要素 |
利用場所 | メタデータ・コンテンツが置ける場所 / フレージング・コンテンツが置ける場所 / スクリプトサポート要素が置ける場所 / span属性がないcolgroup要素の子要素として |
内容 | 無し(この要素内のコンテンツはスクリプトから呼び出されるだけの存在であり、template要素の子とはみなされないため) |
template要素は、スクリプトで利用されるHTMLコードのテンプレートを表します。
<template>
スクリプトで利用されるテンプレート
</template>
属性 | 値 | ||
---|---|---|---|
任意属性 | |||
shadowrootmode="" |
ストリーミング宣言型Shadow Rootを有効にする | open |
Open宣言型Shadow Rootを指定 |
closed |
Closed宣言型Shadow Rootを指定 | ||
shadow |
宣言型Shadow Rootに代理フォーカスを設定する | (shadow ) |
値は省略可能 |
shadowrootclonable |
宣言型Shadow Rootにクローン可能を設定する | (shadowrootclonable ) |
値は省略可能 |
shadowrootserializable |
宣言型Shadow Rootにシリアライズ可能を設定する | (shadowrootserializable ) |
値は省略可能 |
- 上記4つの属性については、仕様書を読んでもまったく理解できませんでした。(理解できる日が来たらこのページ内で解説させていただきます)
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要素の内容を取得して何らかの処理を行えるようになります。
上記の場合、例えば次のような処理が行えます。
- スクリプトがtemplate要素の内容(
<tr>
~</tr>
)を取得して複製を作成。 - 予め設定しておいたデータを各td要素内に挿入し、その行をtbody要素内に追加。
- 必要な行数分、上記の処理を繰り返す。
次の例では、リストの項目をテンプレート化しています。
<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]
- HTML LS:shadowrootclonable属性とshadowrootserializable属性が追加されました。[2024/06/05]