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