“template”要素:テンプレート

要素について

“template”要素はスクリプトによって複製して文書に挿入されるHTMLの断片を表します。

“template”要素自体はブラウザでウェブページを表示したときには表示されません。“template”要素はスクリプトでその内容が挿入されない限り文書に対して何の影響も与えません。

“template”要素は“id”属性などでスクリプトと関連付けます。

HTML5で新しく追加された要素です。対応していないブラウザでは“body”要素内に配置された“template”要素の内容はそのまま表示されてしまいますので注意が必要です。

サンプルコード

<template id="sampletemplate">

<tr>

<th class="rank"></th>
<td class="name"></td>
<td class="population"></td>

</tr>

</template>

<table id="sampletable">

<tr>

<th>順位</th>
<th>県名</th>
<th>人口</th>

</tr>

</table>

<script>

var arr = [

{"rank":"1", "name":"東京都", "population":"13,843,403"},
{"rank":"2", "name":"神奈川県", "population":"9,179,835"},
{"rank":"3", "name":"大阪府", "population":"8,824,566"},
{"rank":"4", "name":"愛知県", "population":"7,539,185"},
{"rank":"5", "name":"埼玉県", "population":"7,322,645"}

];

var template = document.getElementById('sampletemplate');

for(var i =0; i < arr.length; i++){

var clone = template.content.cloneNode(true);
clone.querySelector('.rank').textContent = arr[i].rank;
clone.querySelector('.name').textContent = arr[i].name;
clone.querySelector('.population').textContent = arr[i].population;
document.getElementById('sampletable').appendChild(clone);

}

</script>

順位	県名	人口

“template”要素はカスタム要素を定義するために使用することもできます。

<template id="template-sample">

<style>

ul {

width: calc(100% - 50px);
margin: 20px auto;
padding: 10px 10px 10px 25px;
border-radius: 10px;
font-size: 1.5em;
font-weight: bold;
color: #2b2b2b;
background:

linear-gradient(45deg, #83ccd2 25%, transparent 25%, transparent 75%, #83ccd2 75%),
linear-gradient(45deg, #83ccd2 25%, transparent 25%, transparent 75%, #83ccd2 75%);

background-size: 30px 30px;
background-position: 0 0, 15px 15px;

}

</style>
<ul>

<slot name="samplecontent">テキストが入ります</slot>

</ul>

</template>

<sample-element>

<li slot="samplecontent">三毛猫</li>
<li slot="samplecontent">トラ猫</li>
<li slot="samplecontent">白猫</li>
<li slot="samplecontent">黒猫</li>

</sample-element>

三毛猫

トラ猫

白猫

黒猫

属性と値

要素の内容

“template”要素の内容はDOM上では“template”要素の子要素とはみなされず、文書本体のDOMツリーとは分かれた“DocumentFragment”に含まれます。このため“template”要素のコンテンツ・モデルは“空”とみなされます。

“template”要素の内容にはコンテンツ・モデル、属性や属性値に関する文法の決まりが適用されません。例えば、“img”要素は通常プレースホルダーとして使用することはできませんが、“template”要素の中には“src”属性が指定されていない“img”要素を配置することができます。ただし、省略不可のタグを省略するなど、基本的なHTMLの文法を逸脱することはできません。

仕様書

“template”要素はHTML5から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

定義されている仕様書

<template>