template 要素

4.11.3 template 要素

カテゴリー:
メタデータ・コンテント
フロー・コンテント
フレージング・コンテント
スクリプトサポート要素
この要素を使うことができるコンテキスト:
メタデータ・コンテントが期待される場所
フレージング・コンテントが期待される場所
スクリプトサポート要素が期待される場所
span 属性を持たない colgroup 要素の子として
コンテントモデル:
メタデータ・コンテント、または、
フロー・コンテント、または、
olul 要素のコンテントモデル、または、
dl 要素のコンテントモデル、または、
figure 要素のコンテントモデル、または、
ruby 要素のコンテントモデル、または、
object 要素のコンテントモデル、または、
videoaudio 要素のコンテントモデル、または、
table 要素のコンテントモデル、または、
colgroup 要素のコンテントモデル、または、
thead, tbody, tfoot 要素のコンテントモデル、または、
tr 要素のコンテントモデル、または、
fieldset 要素のコンテントモデル、または、
select 要素のコンテントモデル、のいずれか。
コンテント属性:
グローバル属性
text/html におけるタグの省略:
どちらのタグも省略できません。
指定可能な ARIA role 属性 の値:
なし
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
DOM インタフェース:
interface HTMLTemplateElement : HTMLElement {
  readonly attribute DocumentFragment content;
};

template 要素は、スクリプトによってドキュメントの中で複製して挿入することができる HTML のフラグメントを宣言するために使われます。

テンプレートは、不活性の DOM サブツリーを宣言したり、そのテンプレートを操作して固有のコンテンツを伴うドキュメントのフラグメントをインスタンス化したりするためのメソッドを提供します。

ウェブページが動的にそのドキュメントのコンテンツを変更するとき(例えば、ユーザー操作やサーバーから届いた新たなデータに応えるなど)、HTML のフラグメントが必要になることがよくあります。それらは、状況に合わせて値を挿入するなど、利用前に変更を追加する必要があるかもしれません。

template 要素を使うことで、ドキュメントのロード時には使われないドキュメントのフラグメントを宣言することが可能となります。しかし、それは HTML としてパースされ、ウェブページがそれを利用する段階で利用可能となります。

レンダリングにおいては、template 要素は何も表しません。

template . content

template のコンテンツを返します。これは、別の Document に関連付けられた DocumentFragment に蓄積されます。こうすることで、template のコンテンツがメインの Document に干渉しないようにします。(例えば、フォーム・コントロールがサブミットされないようにしたり、スクリプトが実行されないようにしたりします。)

template 要素は、自身のテンプレートコンテンツとなる DocumentFragment オブジェクトを持ちます。template 要素が生成されるとき、ユーザーエージェントは次の手順を実行して、テンプレートコンテンツを確立しなければいけません:

  1. doc を、template 要素の ownerDocument適切なテンプレートコンテンツ・オーナードキュメントとします。

  2. ownerDocumentdoc となる DocumentFragment オブジェクトを生成します。

  3. template 要素のテンプレートコンテンツを、新たに生成した DocumentFragment オブジェクトにセットします。

Document doc適切なテンプレートコンテンツ・オーナードキュメントとは、次のアルゴリズムによって返された Document となります:

  1. doc がこのアルゴリズムによって生成された Document でないなら、これらの副手順を実行します:

    1. doc がまだ関連不活性テンプレートドキュメントを持っていないなら、これらの副手順を実行します:

      1. new doc を、新たな Documentブラウジングコンテキストを持たない)とします。これは、前述の手順における "このアルゴリズムによって生成された Document" のことです。

      2. docHTML ドキュメントなら、new docHTML ドキュメントとしてマークしておきます。

      3. doc関連不活性テンプレートドキュメントを、new docとします。

    2. doc を、doc関連不活性テンプレートドキュメントにセットします。

    このアルゴリズムによって生成されない Document は、ゆえに、単一の Document に対して、そのすべての template 要素のテンプレートコンテンツを所有するために、それのプロクシとして振る舞わせます。これらは、ブラウジングコンテキストの中にないため、不活性のままです(たとえば、スクリプトが実行されない)。一方、このアルゴリズムによって生成された Document オブジェクトの中にある template 要素は、それらのコンテンツに対して同じ Document オーナーを再利用するだけです。

  2. doc を返します。

template 要素が ownerDocument を変更するとき、ユーザーエージェントは次の手順を実行しなければいけません:

  1. doc を、template 要素の新たな ownerDocument適切なテンプレートコンテンツ・オーナードキュメントとします。

  2. doc の中に template 要素のテンプレートコンテンツDocumentFragment オブジェクト)を導入します。

content IDL 属性は、template 要素のテンプレートコンテンツを返さなければいけません。


template 要素 node がコピー copy にクローンされるクローン手順は、次の手順を実行しなければいけません:

  1. clone children flagクローンアルゴリズムの呼び出しにおいてセットされていないなら、これらの手順を中止します。

  2. copied contents を、nodeテンプレートコンテンツのすべての子をクローンした結果とします。その処理では、ownerDocumentcopyテンプレートコンテンツownerDocument にセットし、clone children flag をセットします。

  3. copied contents を、copyテンプレートコンテンツに追加します。

この例では、スクリプトが、データ構造から得られるデータを使って表を作ります。マークアップから構造を手動で生成するのではなく、template 要素を使って構造を提供します。

<!DOCTYPE html>
<title>Cat data</title>
<script>
 // Data is hard-coded here, but could come from the server
 var data = [
   { name: 'Pillar', color: 'Ticked Tabby', sex: 'Female (neutered)', legs: 3 },
   { name: 'Hedral', color: 'Tuxedo', sex: 'Male (neutered)', legs: 4 },
 ];
</script>
<table>
 <thead>
  <tr>
   <th>Name <th>Color <th>Sex <th>Legs
 <tbody>
  <template id="row">
   <tr><td><td><td><td>
  </template>
</table>
<script>
 var template = document.querySelector('#row');
 for (var i = 0; i < data.length; i += 1) {
   var cat = data[i];
   var clone = template.content.cloneNode(true);
   var cells = clone.querySelectorAll('td');
   cells[0].textContent = cat.name;
   cells[1].textContent = cat.color;
   cells[2].textContent = cat.sex;
   cells[3].textContent = cat.legs;
   template.parentNode.appendChild(clone);
 }
</script>
4.11.3.1 template 要素と XSLT と XPath の関係

このセクションは非規定です。

本仕様は、XSLT と XPath がどのように template 要素と関わるのかについて定義しません。しかし、実際にはこれを定義する仕様が他にないため、ここで実装者に対していくつかのガイドラインを提示します。これらは、本仕様で説明された他の処理と一貫性を保つことを目的としています:


※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/scripting-1.html#the-template-element