[HTML] <template>要素について

3 min read

template 要素とは

HTML のコンテンツテンプレート (<template>) 要素 は、すなわちページの読み込み時にすぐには描画されないものの、後で JavaScript を使用してインスタンスを生成できる HTML を保持するメカニズムです。

テンプレートは、文書内に格納されたコンテンツの断片として考えてください。ページの読み込み時にパーサーが <template> 要素の内容を処理している間、その内容の有効性のみが検証されます。しかし、要素の内容は描画されません。

<template>: コンテンツテンプレート要素 - HTML: HyperText Markup Language | MDN<template> は HTML の要素で、ページが読み込まれたときにすぐにレンダリングされるのではなく、実行時に JavaScript を使って後からインスタンス化することができる HTML を保持するためのメカニズムです。https://developer.mozilla.org/ja/docs/Web/HTML/Element/template

template 要素の特徴

  1. コンテンツは DOM に展開されるまで動作しない
    → メモリー上に存在するだけでレンダリングされない
  2. <template>内のコンテンツは反応しない:
    1. <script>は動作しない
    2. <img>の読み込みは発生しない
    3. <audio>は再生されない
      などなど…
  3. <template>内のコンテンツは DOM ツリー状に存在しないため、document.getElementById()querySelector() で取得することが出来ない

Learn web developmentExplore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about. https://www.html5rocks.com/ja/tutorials/webcomponents/template/

使い方

<template class="template-element">
  <img src="//example.com/image.png" alt="sugoi gazou" />
</template>
// <template>要素から取得
const template = document.querySelector(".template-element");
const clone = document.importNode(template.content, true);
const img = clone.querySelector("img");

// DOMツリーへの挿入
document.body.appendChild(img);

その他

<template>
  <div>
    <template>
      <div>inner template</div>
    </template>
  </div>
</template>

外側のtemplateをアクティベートしても、内側のtemplateはアクティベートされない。

このページをシェアする

Related Articles

クレジットカード情報入力フォームのベストプラクティスを考える

背景 / クレジットカード情報を入力するフォームの仕様 / 適切なマークアップをする / デモ

[HTML] meta http-equiv="X-UA-Compatible"の記述は不要

TL;DR / meta http-equiv="X-UA-Compatible" とは / 今後はどうするのか / 参考 / Footnotes

`<input type="range">`のstepを可変にする方法

仕様 / 完成デモ / 実装 / 参考

[HTML] meta robots の noodp, noydir 定義は SEO として不要

TL;DR / noodp,noydir と歴史 / 今後はどうするのか / Footnotes