template 要素とは
HTML のコンテンツテンプレート (<template>
) 要素 は、すなわちページの読み込み時にすぐには描画されないものの、後で JavaScript を使用してインスタンスを生成できる HTML を保持するメカニズムです。
テンプレートは、文書内に格納されたコンテンツの断片として考えてください。ページの読み込み時にパーサーが <template>
要素の内容を処理している間、その内容の有効性のみが検証されます。しかし、要素の内容は描画されません。
<template>: コンテンツテンプレート要素 - HTML: ハイパーテキストマークアップ言語 | MDNdeveloper.mozilla.org
template 要素の特徴
- コンテンツは DOM に展開されるまで動作しない
→ メモリー上に存在するだけでレンダリングされない <template>
内のコンテンツは反応しない:<script>
は動作しない<img>
の読み込みは発生しない<audio>
は再生されない
などなど…
<template>
内のコンテンツは DOM ツリー状に存在しないため、document.getElementById()
や querySelector()
で取得することが出来ない
https://web.archive.org/web/20220615032437/https://www.html5rocks.com/ja/tutorials/webcomponents/template/
使い方
<template class="template-element">
<img src="//example.com/image.png" alt="sugoi gazou" />
</template>
const template = document.querySelector('.template-element');
const clone = document.importNode(template.content, true);
const img = clone.querySelector('img');
document.body.appendChild(img);
その他
<template>
<div>
<template>
<div>inner template</div>
</template>
</div>
</template>
外側のtemplate
をアクティベートしても、内側のtemplate
はアクティベートされない。