template は、スクリプトで利用される要素のテンプレートを定義する際に用いられます。
<template>～</template> で囲まれた部分は、ページを表示した際には表示されません。JavaScript 等のスクリプトの中で複製され、値を設定され、挿入されることで表示されるようになります。
下記の例では、テーブルの 1行に対応するテンプレートを定義しておき、JavaScript の中でテンプレートを複製(clone)し、値を設定し、tbody要素に挿入することで、テーブルの各行を生成しています。
<!DOCTYPE html>
<html>
<head>
<title>Template sample</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th><th>Age</th></tr>
</tr>
</thead>
<tbody>
<template id="row">
<tr><td></td><td></td></tr>
</template>
</tbody>
</table>
<script>
var data_list = [
{ name: 'Yamada', age: 26 },
{ name: 'Tanaka', age: 32 },
];
var template = document.querySelector('#row');
data_list.forEach((data) => {
var clone = template.content.cloneNode(true);
var cells = clone.querySelectorAll('td');
cells[0].textContent = data.name;
cells[1].textContent = data.age;
template.parentNode.appendChild(clone);
});
</script>
</body>
</html>
| Name | Age |
|---|---|
| Yamada | 26 |
| Tanaka | 32 |
上記では JavaScript でデータのマッピングを行っていますが、<slot> 要素と slot 属性を用いてマッピングを行うこともできます。詳細は Shadow DOM を参照してください。