[54] HTML の template 要素は、スクリプトで雛形テンプレートとして使うための HTML 素片を宣言するものです。直接はレンダリングされず、外部から id 属性などによって参照したりすることもできませんが、 スクリプトで clone するなどして好きに使うことができます。

仕様書

属性

[93] template 要素の内容属性
  • shadowmode

内容

[37] 文書のソース上 template 要素の内容となっているものは、 DOM 上は要素の内容ではなく、雛形内容となります。

[38] template の中身がフォームに関連付けられたり、 id が有効になったりすると都合が悪いことが多いので、あえて本来の木構造とは別の木に属する形に DOM が拡張されました。[64] このような特別な扱いをされるのは template 要素だけです。[65] HTML でも XML でも、同じように動作します。

[41] template 要素の内容モデルは雛形内容に適用されます。

[42] template 要素の内容に対する制約はなぜか特にありません。

[53] 雛形内容の項もご覧ください。[66] HTML文書やXML文書は雛形内容ではなく内容に節点を含めることはできませんが、 DOM 操作によりスクリプトから内容を追加することはできます。

構文解析と直列化

[43] HTML でも XML でも、 template 要素の内容として記述された部分は内容ではなく、 雛形内容となります。

[44] template 要素内では form要素指示子を用いた form 要素との関連付けは行われません。

[45] 文書を HTML として、または XML として直列化する時は、 template 要素の子供のかわりに雛形内容の子供が直列化されます。

[50] template 要素の innerHTML は要素の内容ではなく雛形内容に対して適用されます。

[51] getter については HTML Standard で規定されています。 setter については現時点でまだ DOM Parsing Standard が更新されていないようです。 [52] textContent、insertAdjacentHTML などは他の要素と同じく内容に対して適用されます。

選択子

[46] 通常の選択子の処理では雛形内容は無視されます。

XPath

[39] DOM XPath では雛形内容は無視されます >>36。

[49] >>40 の通り XSLT では雛形内容が要素の内容として扱われるので、 DOM XPath と XSLT 内の XPath で異なる動作モードが必要です。

XSLT

[40] XSLT では入力の雛形内容が template 要素の内容であるかのように扱われます。 また出力の template 要素の内容は雛形内容となります。 >>36

歴史

[68] HTML には歴史上反復雛形やデータ雛形といった「雛形」 が存在していましたが、どちらも広くは実装されませんでした。

[69] 本「雛形」は XBL の流れを汲む Web Components の一部として提案されました。

[1] template 要素は HTML5 の後継である HTML Standard に追加されました。しばしばバズワードとしての HTML5 の一部として紹介されますが、 実際には HTML5 時代には存在していませんでした。

[2] HTML5 による構文解析器の標準化と各 Webブラウザーのいわゆる HTML5構文解析器への移行の後、最早今後 HTML構文解析器への大きな変更は行えないのではないかとの悲観的な見方もありました。 しかし template 要素は HTML構文解析器にかなりの変更を加えるものでしたが、 比較的早いうちに多くの Webブラウザーに実装されることになり、 その懸念は打ち消されました。

前史

[110] WindowScript

XBL 2.0

[107] XBL 2.0, , https://web.archive.org/web/20120306233919/http://dev.w3.org/2006/xbl2/Overview.html#template

[108] HTML要素概説
要素名
template
日付
説明
、 XBL 2.0 (HTML 版) で template が定義された。 >>111 歴史的には XBL 2.0 (XML 版) template, XBL 1.0 content に遡る。
出典
  • [111] XBL 2.0, , Ian Hickson, , , https://web.archive.org/web/20120306233919/http://dev.w3.org/2006/xbl2/Overview.html
参照
datatemplate
参照
script

Component Model

[106] HTML要素概説
要素名
template
日付
説明
、 Component Model に template が追加された。
出典
  • CM:Template: <template> stub, initial CSS text, more minor tweaking, , , https://github.com/dglazkov/component-model/commit/eb7b2211d5785c8be7bd19f942a67a1991447b41

HTML Templates

[105] Component Model 仕様案から分離独立した HTML Templates で Web Components 仕様の策定が進められました。

[100] >>99 仕様書最古。要素はまだない。

[102] >>101 template 要素初出。

[103] HTML要素概説
要素名
template
日付
説明
、 HTML Templates 仕様書が作成され、 template が定義された。
出典
  • WC:TemplateElement: [Templates]: Added template element definition., , , https://github.com/WICG/webcomponents/commit/111ace78c25fb63905c4e8227126d06cfc11b7e2

[8] IRC logs: freenode / #whatwg / 20120418 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20120418

[9] HTML Templates ( ( 版)) http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html

[10] [whatwg] [webcomponents] Template element parser changes => Proposal for adding DocumentFragment.innerHTML ( ( 版)) http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-May/035677.html

[11] IRC logs: freenode / #whatwg / 20120426 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20120426#l-193

[12] IRC logs: freenode / #whatwg / 20120608 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20120608

[13] IRC logs: freenode / #whatwg / 20120614 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20120614#l-1199

[14] IRC logs: freenode / #whatwg / 20120716 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20120716

[15] IRC logs: freenode / #whatwg / 20120717 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20120717

[16] IRC logs: freenode / #whatwg / 20120823 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20120823#l-167

[17] IRC logs: freenode / #whatwg / 20120828 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20120828#l-761

[18] [whatwg] Declarative Inert DOM (e.g. the <template> element) ( ( 版)) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-November/037775.html

[19] [webkit-dev] Feature announcement: HTMLTemplateElement ( ( 版)) http://lists.webkit.org/pipermail/webkit-dev/2012-November/023002.html

[20] [webkit-dev] Feature announcement: HTMLTemplateElement ( ( 版)) http://lists.webkit.org/pipermail/webkit-dev/2012-November/023032.html

[21] [webkit-dev] Feature announcement: HTMLTemplateElement ( ( 版)) http://lists.webkit.org/pipermail/webkit-dev/2012-November/023032.html

[22] HTML Templates ( ( 版)) http://www.w3.org/TR/2013/WD-html-templates-20130214/

[23] XBL 2.0 ( ( 版)) http://dev.w3.org/2006/xbl2/Overview.html#the-template-element

[24] XBL 2.0 ( ( 版)) http://dev.w3.org/2006/xbl2/Overview.html#the-htmltemplateelement-interface

[25] [html-templates] Seeking pre-LC comments for HTML Templates; deadline June 10 ( (Arthur Barstow 著, 版)) http://lists.w3.org/Archives/Public/public-webapps/2013AprJun/0845.html

[26] IRC logs: freenode / #whatwg / 20130614 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20130614

[28] IRC logs: freenode / #whatwg / 20130625 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20130625

[216] HTML要素概説
要素名
template
日付
説明
、 HTML Standard に template が追加された。 HTML Templates の成果を取り込んだものである。 現行仕様である。
出典
  • HTML r7000, , , https://github.com/whatwg/html/commit/685a5e0b27e963f6b0a62a21cb95078171076e3b

[29] IRC logs: freenode / #whatwg / 20130725 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20130725

[30] Web Applications 1.0 r8115 Make <form><template><input> not result in the <input> being in the <form>. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=8114&to=8115

[31] Web Applications 1.0 r8179 Have </head><template></template> go in the <head> for consistency with other elements. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=8178&to=8179

[32] Web Applications 1.0 r8218 Update the HTML parser to handle <html><head></head><template></template><!----> ( ( 版)) http://html5.org/tools/web-apps-tracker?from=8217&to=8218

[33] HTML Templates ( ( 版)) https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html

[34] [whatwg] The src-N proposal ( ( 版)) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2013-November/041374.html

[35] Web Applications 1.0 r8293 The 'reset the insertion mode' algorithm referenced the context element in some cases where there was no context element (e.g. '<html><head></head><template></template>') ( ( 版)) http://html5.org/tools/web-apps-tracker?from=8292&to=8293

関連

[47] 雛形は template 要素を用いずとも任意の要素に hidden 属性をつけるなどして文書に埋め込むことができますが、その場合フォーム制御子がフォームに関連付けられたり、 雛形と外側で同じ id 属性値を使えなかったりなど、 レンダリング上見えない以外は普通の要素であることの弊害があります。また、 tr や col など特別な構文解析がなされる要素を使いたい時は、 それぞれに適した文脈を用意する必要があります。 template 要素はこうした問題を回避できます。

[48] また雛形は script 要素によってデータブロックとして埋め込むこともできます。 しかし script 要素の内容は構文解析されないので必要に応じて著者のスクリプトで手動で DOM に変換する必要があります。また script 要素の終了タグに相当する文字列を埋め込めないので、 雛形を入れ子にできなかったり、サニタイズが必要だったりします。 template 要素はこのような問題を回避できます。

[55] XML Binding Language (XBL) 2.0 ( ( 版)) http://www.w3.org/TR/2007/CR-xbl-20070316/#the-template

[56] XML Binding Language (XBL) 2.0 ( ( 版)) http://www.w3.org/TR/2007/CR-xbl-20070316/#rules

[57] IRC logs: freenode / #whatwg / 20140321 ( ( 版)) http://krijnhoetmer.nl/irc-logs/whatwg/20140321

[58] [whatwg] template element? ( ( 版)) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2004-July/170894.html

[59] Web Applications 1.0 r8679 PARSER: Change whether <template><td></template> is a parse error ( ( 版)) http://html5.org/r/8679

[60] Web Applications 1.0 r8657 Reduce redundant parse errors in some edge cases involving EOFs in elements in templates. ( ( 版)) http://html5.org/r/8657

[61] HTML Templates ( ( 版)) https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html

[62] HTML Templates ( ( 版)) https://dvcs.w3.org/hg/webcomponents/raw-file/4c6f1a9b432a/spec/templates/index.html

[63] Introduction to Web Components ( ( 版)) http://www.w3.org/TR/2013/WD-components-intro-20130606/#template-section

[67] 現在は未だすべてのWebブラウザーが template 要素を実装しているわけではないため、 template 要素の innerHTML を他の要素の template に代入することで手動 clone する技法がしばしば使われています。自動的に構文解析して DOM が構築される template 要素のメリットは失われますが、 新旧どちらのブラウザーでも1つの式で clone できます。

[3] Microsoft Edge and Web Components | Microsoft Edge Dev Blog ( 版) http://blogs.windows.com/msedgedev/2015/07/15/microsoft-edge-and-web-components/

We are happy to announce that we are starting development to add HTML Template element support to Microsoft Edge today!

[4] Google は template の内容も検索結果の表示に反映させるようです。

[5] amphtml/amp-html-format.md at master · ampproject/amphtml () https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>

The <script> tag must have an async attribute and must have a custom-template attribute referencing the type of the template. The script URL must start with "https://cdn.ampproject.org" and must follow a very strict pattern of /v\d+/[a-z-]+-(latest|\d+|\d+.\d+).js.

The templates are declared in the document as following:

<template type="amp-mustache" id="template1">

Hello {{you}}!

</template>

The type attribute is required and must reference a declared custom-element script.

[6] Allow anything in <template> for document conformance (zcorpan著, ) https://github.com/whatwg/html/commit/950d3015bead974bec1d7d86c00d641655ea0b66

[7] [cgiowt] (3) PARSER: Change whether <template><td></template> is a pa… (Hixie著, ) https://github.com/whatwg/html/commit/b29ecbe1b74218130ba5c82fa79a943a35f3daea

[70] Clarify template content model and syntax (sideshowbarker著, ) https://github.com/whatwg/html/commit/3f1cd0163b518d0451b1d4ab90bf35ae43e6932d

[71] Template element: "Content model: Nothing." · Issue #3021 · whatwg/html () https://github.com/whatwg/html/issues/3021

[72] Editorial: template *Content model* ➡️ “See prose” by sideshowbarker · Pull Request #3031 · whatwg/html () https://github.com/whatwg/html/pull/3031

[73] Create Template-Instantiation.md (rniwa著, ) https://github.com/w3c/webcomponents/commit/4f63679ecbae4a66ec533370c8785bee516e403c

[74] Fixed a typo in Template-Instantiation.md. (rniwa著, ) https://github.com/w3c/webcomponents/commit/652c32a79814d5e595fa30af1a688b69dc20feba

[75] Copy-edits to Use Cases & Background sections (#679) (sideshowbarker著, ) https://github.com/w3c/webcomponents/commit/cb01606118d95885401fa9b5e6c21a2ed6cfa666

[76] Copy-edits to Use Cases & Background sections by sideshowbarker · Pull Request #679 · w3c/webcomponents () https://github.com/w3c/webcomponents/pull/679

[77] Copy edits to sections 3.1 and 3.2 (#686) (sideshowbarker著, ) https://github.com/w3c/webcomponents/commit/1185857719557630cae93775d460143c36bb5e4c

[78] Copy edits to sections 3.1 and 3.2 by sideshowbarker · Pull Request #686 · w3c/webcomponents () https://github.com/w3c/webcomponents/pull/686

[79] Fix Handlebars typos (#692) (padamczewski著, ) https://github.com/w3c/webcomponents/commit/f3fde5adc7354521330264b40379520a63470b0c

[80] Fix Handlebars typos by padamczewski · Pull Request #692 · w3c/webcomponents () https://github.com/w3c/webcomponents/pull/692

[81] Fix markdown styles of Template-Instantiation (#691) (koba04著, ) https://github.com/w3c/webcomponents/commit/26f1f00fa893b1e6afcaffe88db043393724503c

[82] Fix Markdown styles of Template-Instantiation by koba04 · Pull Request #691 · w3c/webcomponents () https://github.com/w3c/webcomponents/pull/691

[83] Removed erroneous markdown symbols in the sample code (rniwa著, ) https://github.com/w3c/webcomponents/commit/a0f3ad2bd1688ca02a94bb8d4e7c927b00ce17a6

[84] [templates] Unclear usage of markdown-like syntax in state object · Issue #689 · w3c/webcomponents () https://github.com/w3c/webcomponents/issues/689

[85] [templates] Unclear usage of markdown-like syntax in state object · Issue #689 · w3c/webcomponents () https://github.com/w3c/webcomponents/issues/689

[86] Fix template instantiation examples (#694) (zcei著, ) https://github.com/w3c/webcomponents/commit/7d97aca1c0a3737725a95feda65d78bd15116ad7

[87] Fix template instantiation examples by zcei · Pull Request #694 · w3c/webcomponents () https://github.com/w3c/webcomponents/pull/694

[88] Fix some errors in Template-Instantiation.md (#699) (rkusa著, ) https://github.com/w3c/webcomponents/commit/8a268a4c472a6d95fb2f434fc7f85702b7e3665c

[89] Add a missing parenthesis (#698) (koba04著, ) https://github.com/w3c/webcomponents/commit/a917d7f7b18186d039769ea183afd2da5efd6f70

[90] Highlight code blocks, fix emphasis (#712) (wiinci著, ) https://github.com/w3c/webcomponents/commit/8f353b61e1e13fd6192e80543a17c89a73d941a8

[91] Highlight code blocks, fix emphasis by wiinci · Pull Request #712 · w3c/webcomponents () https://github.com/w3c/webcomponents/pull/712

[92] Template in a SVG context does not have any content · Issue #3553 · whatwg/html () https://github.com/whatwg/html/issues/3553

[94] CSS Modules | Vue Loader () https://vue-loader.vuejs.org/guide/css-modules.html#usage

You can then use it in your templates with a dynamic class binding:

<template>

<p :class="$style.red">

[95] Functional Components | Vue Loader () https://vue-loader.vuejs.org/guide/functional.html

Expressions in the template are evaluated in the functional render context. This means props need to be accessed as props.xxx in the template:

<template functional>

<div>{{ props.foo }}</div>

</template>

[96] Using Pre-Processors | Vue Loader () https://vue-loader.vuejs.org/guide/pre-processors.html#pug

<template lang="pug">

div

h1 Hello world!

</template>