目次に戻る

template要素：HTML Living Standard各要素別メモ

概要

カテゴリー
配置できる場所
内容モデル
  • なし。
  • 補足：下記の結果として、当該要素の内容に何が書いてあったとしても、上記の「なし」に違反するという取り扱いを受けないことになる。
    • 当該要素の内容は、当該要素の子孫要素や内容テキストとして扱われない（当該要素の内容は、HTML文書の構成部分とはならず、独立した別個のオブジェクトとなる）。
    • 当該要素の内容は、HTML構文又はXML構文として必要とされる要件を除いて、準拠性のチェックを受けない。
属性
  • グローバル属性
  • shadowrootmode→値は下記のとおり。宣言的shadow rootsであることを表し、かつ、その方式を指定する。
    • open→開放宣言的shadow roots
    • closed→排他宣言的shadow roots
  • shadowrootdelegatesfocus→ブーリアン属性。shadow rootsに対してフォーカスを委任する場合に指定する。
  • shadowrootclonable→ブーリアン属性。shadow rootsに対して複製可能にする場合に指定する。
  • shadowrootserializable→ブーリアン属性。shadow rootsに対して直列化可能にする場合に指定する。
HTML構文におけるタグの省略
  • 省略不可。
WAI-ARIA
  • すべてのrole及びすべてのaria-*属性は指定不可。
視覚系ブラウザのデフォルトとして期待されるCSS

  template {display: none;}
準拠チェッカーに対する規定
意味・用法

スクリプトによってHTML文書に挿入され又は複製されうるところの、HTML断片を記述するために、用いられる。

当該要素の内容は、レンダリングされない。

アクセシビリティ関連

私見・補足

テンプレートを表す。

この要素の内容として配置されている諸要素は、その内容や属性・属性値が不完全であることが想定されており、それらをスクリプトで操作することによって十全なものとしてから、HTML文書の適宜の場所に挿入・複製する。

内容モデルの補足：現実問題としては、下記の点を遵守しないと不具合が出るだろうと思われる。

準拠チェッカーに対する規定の補足：例えば、属性値が仕様に合致しない記載でもチェックされずにスルーされるし、仕様上は必須な属性や仕様上は必須な子要素などを記載してなくてもスルーされる。しかし、開始タグ・終了タグが互い違いになっていて要素の入れ子関係が正しくない場合などは、エラー判定される。

表示確認

ソース１

  <div>下記に記載しているテンプレートは表示されないはず。</div>
  <template>
  <td>テンプレ</td>
  </template>
表示結果１
下記に記載しているテンプレートは表示されないはず。
ソース２

  <ul id="rekkyo">
    <template id="tem"><li>番目</li></template>
  </ul>
  <script>
    for (let i = 1; i <= 5; i++) {
      const xxx = document.getElementById('tem').content.cloneNode(true);
      xxx.firstChild.textContent = i + xxx.firstChild.textContent;
      document.getElementById("rekkyo").appendChild(xxx);
    }
  </script>
表示結果２