template要素
の仕様

template
コンテンツの雛型 (content Template)
種類
雛型要素
カテゴリ
レンダ
リング
ボックスを生成しない
非表示の要素
  1. template {
  2. display: none;
  3. }

CSS を大雑把に読むと、 要素とその子孫は、ボックスやテキストランを生成しません。 などになります。

使用できる状態
メタデータコンテンツを受け入れる要素。
フレージングコンテンツを受け入れる要素。
スクリプトをサポートする要素を受け入れる要素。
span属性を持たない colgroup要素
許可されている内容
制限はない。コンテンツモデルは何もありません。内容は、要素自体の子ではありません。
タグの省略
省略できません。
許可されているARIA
なし[No corresponding role]
属性

グローバル属性のみ

DOM
HTMLTemplateElement
  1. [Exposed=Window]
  2. interface HTMLTemplateElement : HTMLElement {
  3. [HTMLConstructor] constructor();
  4.  
  5. readonly attribute DocumentFragment content;
  6. };
  7.  
  8. interface DocumentFragment : Node {
  9. constructor();
  10. };
PUG
_template.pug
  1. block variable
  2. block document
  3. doctype html
  4. html(lang="ja")
  5. head
  6. block head
  7. meta(charset="UTF-8")
  8. title 離珠のHTMLでしぃ！
  9. template(id="itpJs011")
  10. p てんぷれーとのさんぷる
  11. script
  12. | document.addEventListener("DOMContentLoaded", function() {
  13. | document.body.appendChild(document.importNode(document.getElementById("itpJs011").content, true));
  14. | });
  15. body
  16. block body
  17. | template要素のサンプル用ページです。
説明
template要素は、スクリプトによって文書に複製および挿入できる HTMLのフラグメントを宣言する為に使用されます。

ページの読み込み時にすぐには描画されないものの、後で JavaScriptを使用してインスタンスを生成できる HTMLを保持するメカニズムの要素です。

「template要素」のページで改めて詳細に記述しています。

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>離珠のHTMLでしぃ！</title>
  6. <template id="itpJs011">
  7. <p>てんぷれーとのさんぷる</p>
  8. </template>
  9. <script>
  10. document.addEventListener("DOMContentLoaded", function() {
  11. document.body.appendChild(document.importNode(document.getElementById("itpJs011").content, true));
  12. });
  13. </script>
  14. </head>
  15. <body>
  16. template要素のサンプル用ページです。
  17. </body>
  18. </html>
参照元
参照元
  1. HTML Living Standard. 4.12.3 The template element
  2. HTML Living Standard. 15 Rendering 15.3.1 Hidden elements
  3. HTML 5.2 W3C 勧告. 4.12.3. The template element (W3C勧告、2017年12月14日)
  4. HTML 5.2 W3C 勧告. 10.3.1. Hidden elements (W3C勧告、2017年12月14日)
  5. HTML 5.1 W3C 勧告. 4.12.3. The template element (W3C勧告、2016年11月1日)
  6. HTML 5.1 W3C 勧告. 10.3.1. Hidden elements (W3C勧告、2016年11月1日)
  7. MDN Web Docs. HTML <template>: コンテンツテンプレート要素
最終確認日
2022-07-27