[54] HTML の template 要素は、スクリプトで雛形として使うための
HTML 素片を宣言するものです。直接はレンダリングされず、外部から id 属性などによって参照したりすることもできませんが、
スクリプトで clone するなどして好きに使うことができます。
template 要素の内容属性[37] 文書のソース上 template 要素の内容となっているものは、
DOM 上は要素の内容ではなく、雛形内容となります。
[43] HTML でも XML でも、 template 要素の内容として記述された部分は内容ではなく、
雛形内容となります。
[44] template 要素内では form要素指示子を用いた
form 要素との関連付けは行われません。
[45] 文書を HTML として、または XML として直列化する時は、 template
要素の子供のかわりに雛形内容の子供が直列化されます。
[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ブラウザーに実装されることになり、
その懸念は打ち消されました。
[107] XBL 2.0, , https://web.archive.org/web/20120306233919/http://dev.w3.org/2006/xbl2/Overview.html#template
templatetemplate
が追加された。[105] Component Model 仕様案から分離独立した HTML Templates で Web Components 仕様の策定が進められました。
templatetemplate
が定義された。[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
templatetemplate
が追加された。
HTML Templates
の成果を取り込んだものである。
現行仕様である。[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 できます。
We are happy to announce that we are starting development to add HTML Template element support to Microsoft Edge today!
[4] Google は template の内容も検索結果の表示に反映させるようです。
<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
You can then use it in your templates with a dynamic class binding:
<template>
<p :class="$style.red">
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>
<template lang="pug">
div
h1 Hello world!
</template>
templateの中身がフォームに関連付けられたり、idが有効になったりすると都合が悪いことが多いので、あえて本来の木構造とは別の木に属する形に DOM が拡張されました。