Edit

Page

Page title:

Page body:

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

* 仕様書

[REFS[
- [36] [CITE@en-US-x-hixie[HTML Standard]] ([TIME[2013-12-19 00:10:55 +09:00]] 版) <http://www.whatwg.org/specs/web-apps/current-work/#the-template-element>
]REFS]

* 属性

[FIG(short list)[ [93] [CODE[template]] [[要素]]の[[内容属性]]
- [[大域属性]]

[HISTORY[
- [CODE[shadowmode]]
]HISTORY]
]FIG]

* 内容

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

;; [38] [CODE(HTMLe)@en[[[template]]]] の中身が[[フォーム]]に関連付けられたり、 [CODE(HTMLa)@en[[[id]]]]
が有効になったりすると都合が悪いことが多いので、あえて本来の[[木構造]]とは別の[[木]]に属する形に [[DOM]]
が拡張されました。

;; [64] このような特別な扱いをされるのは [CODE(HTMLe)@en[[[template]]]]
[[要素]]だけです。

;; [65] [[HTML]] でも [[XML]] でも、同じように動作します。

[41] [CODE(HTMLe)@en[[[template]]]] [[要素]]の[[内容モデル]]は[[雛形内容]]に適用されます。

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

;; [53] [[雛形内容]]の項もご覧ください。

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

* 構文解析と直列化

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

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

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

[50] [CODE(HTMLe)@en[[[template]]]] [[要素]]の [CODE(DOMa)@en[[[innerHTML]]]] 
は[[要素]]の[[内容]]ではなく[[雛形内容]]に対して適用されます。

;; [51] [[getter]] については [[HTML Standard]] で規定されています。 [[setter]] については現時点でまだ
[[DOM Parsing Standard]] が更新されていないようです。 [TIME[2014-01-03T13:47:55.200Z]]

;; [52] [CODE(DOMa)@en[[[textContent]]]]、[CODE(DOMa)@en[[[insertAdjacentHTML]]]] などは他の[[要素]]と同じく[[内容]]に対して適用されます。

* 選択子

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

* XPath

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

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

* XSLT

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

* 歴史

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

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

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

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

** 前史

[110] [[WindowScript]]

** [CITE[XBL 2.0]]

[107] 
[CITE@en-US[XBL 2.0]], [TIME[2024-09-08T07:34:49.000Z]], [TIME[2012-03-06T23:47:48.144Z]] <https://web.archive.org/web/20120306233919/http://dev.w3.org/2006/xbl2/Overview.html#template>

[FIG(data)[ [108] [[HTML要素概説]]

:[F[要素名]]:[CODE[template]]
:日付:[TIME[2010-09-03]]
:説明:
[TIME[2010-09-03]]、
[CITE[XBL 2.0]] ([[HTML]] 版)
で
[CODE[template]]
が定義された。
[SRC[>>111]]
歴史的には [CITE[XBL 2.0]] ([[XML]] 版) [CODE[template]],
[CITE[XBL 1.0]] [CODE[content]] に遡る。
:出典:
[REFS[

-
[111] 
[CITE@en-US[XBL 2.0]], 
[DATA(.author)[[[W3C]]]],
[[Ian Hickson]],
[TIME(.published)[3 September 2010][2010-09-03]],
[TIME[2024-09-08T07:29:42.000Z]], [TIME[2012-03-06T23:42:40.506Z]] <https://web.archive.org/web/20120306233919/http://dev.w3.org/2006/xbl2/Overview.html>

]REFS]
:参照:[CODE[datatemplate]]
:参照:[CODE[script]]

]FIG]

** [CITE[Component Model]]

- [104] [CITE@en[<template> stub, initial CSS text, more minor tweaking]], [[Roland Steiner]], [TIME[2011-09-13 12:03:14 +09:00]], [TIME[2024-09-08T06:10:04.000Z]] <https://github.com/dglazkov/component-model/commit/eb7b2211d5785c8be7bd19f942a67a1991447b41>
- [109] 
[CITE@en[Added explainer, needs cleanup and lots of work.]], [[dglazkov]], [TIME[2011-11-19 03:10:39 +09:00]], [TIME[2024-09-12T13:52:55.000Z]] <https://github.com/dglazkov/component-model/commit/bf45ddcfa4b574ab94dc4b8e18843e322816d5a5#diff-cbc10fb4d19472d5b1b3fdc6f39509c1f90afaba3822f0a4f18396175120a24c>

[FIG(data)[ [106] [[HTML要素概説]]

:[F[要素名]]:[CODE[template]]
:日付:[TIME[2011-09-13]]
:説明:
[TIME[2011-09-13]]、
[CITE[Component Model]]
に
[CODE[template]]
が追加された。
:出典:
[REFS[

-
[DFN[CM:Template]]:
[CITE@en[<template> stub, initial CSS text, more minor tweaking]], 
[DATA(.author)[[[Roland Steiner]]]], 
[TIME(.published)[2011-09-13 12:03:14 +09:00]], [TIME[2024-09-08T06:10:04.000Z]] <https://github.com/dglazkov/component-model/commit/eb7b2211d5785c8be7bd19f942a67a1991447b41>

]REFS]

]FIG]

** [CITE[HTML Templates]]

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

-[98] 
[CITE@en[History for spec/templates/index.html - WICG/webcomponents · GitHub]], [TIME[2024-09-08T05:36:53.000Z]] <https://github.com/WICG/webcomponents/commits/gh-pages/spec/templates/index.html>
-- [99] [CITE@en['''['''Templates''']''': Land spec scaffolding.]], [[dglazkov]], [TIME[2012-01-13 08:09:07 +09:00]], [TIME[2024-09-08T05:38:10.000Z]] <https://github.com/WICG/webcomponents/commit/e3f65841b66bd59d96a9d4cba822bc13d1ab77b7>
-- [101] [CITE@en['''['''Templates''']''': Added template element definition.]], [[dglazkov]], [TIME[2012-01-21 04:40:18 +09:00]], [TIME[2024-09-08T05:38:43.000Z]] <https://github.com/WICG/webcomponents/commit/111ace78c25fb63905c4e8227126d06cfc11b7e2>

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

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

[FIG(data)[ [103] [[HTML要素概説]]

:[F[要素名]]:[CODE[template]]
:日付:[TIME[2012-01-20]]
:説明:
[TIME[2012-01-20]]、
[CITE[HTML Templates]]
仕様書が作成され、
[CODE[template]]
が定義された。
:出典:
[REFS[

-
[DFN[WC:TemplateElement]]:
[CITE@en[__&&[&&__Templates__&&]&&__: Added template element definition.]], 
[DATA(.author)[[[dglazkov]]]], 
[TIME(.published)[2012-01-21 04:40:18 +09:00]], [TIME[2024-09-08T05:38:43.000Z]] <https://github.com/WICG/webcomponents/commit/111ace78c25fb63905c4e8227126d06cfc11b7e2>

]REFS]

]FIG]

[8] [CITE[IRC logs: freenode / #whatwg / 20120418]]
( ([TIME[2012-04-23 08:53:05 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20120418>

[9] [CITE@en[HTML Templates]]
( ([TIME[2012-04-24 21:43:53 +09:00]] 版))
<http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html>

[10] [CITE[''''''[''''''whatwg'''''']'''''' '''['''webcomponents''']''' Template element parser changes => Proposal for adding DocumentFragment.innerHTML]]
( ([TIME[2012-05-05 09:15:09 +09:00]] 版))
<http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-May/035677.html>

[11] [CITE[IRC logs: freenode / #whatwg / 20120426]]
( ([TIME[2012-05-03 12:16:12 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20120426#l-193>

[12] [CITE[IRC logs: freenode / #whatwg / 20120608]]
( ([TIME[2012-06-23 23:26:42 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20120608>

[13] [CITE[IRC logs: freenode / #whatwg / 20120614]]
( ([TIME[2012-06-30 22:58:49 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20120614#l-1199>

[14] [CITE[IRC logs: freenode / #whatwg / 20120716]]
( ([TIME[2012-07-21 11:45:07 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20120716>

[15] [CITE[IRC logs: freenode / #whatwg / 20120717]]
( ([TIME[2012-07-21 11:57:22 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20120717>

[16] [CITE[IRC logs: freenode / #whatwg / 20120823]]
( ([TIME[2012-09-01 21:17:42 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20120823#l-167>

[17] [CITE[IRC logs: freenode / #whatwg / 20120828]]
( ([TIME[2012-09-03 21:43:39 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20120828#l-761>

[18] [CITE[''''''[''''''whatwg'''''']'''''' Declarative Inert DOM (e.g. the <template> element)]]
( ([TIME[2012-11-03 10:29:12 +09:00]] 版))
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-November/037775.html>

[19] [CITE[''''''[''''''webkit-dev'''''']'''''' Feature announcement: HTMLTemplateElement]]
( ([TIME[2012-12-01 08:00:56 +09:00]] 版))
<http://lists.webkit.org/pipermail/webkit-dev/2012-November/023002.html>

[20] [CITE[''''''[''''''webkit-dev'''''']'''''' Feature announcement: HTMLTemplateElement]]
( ([TIME[2012-12-01 08:00:56 +09:00]] 版))
<http://lists.webkit.org/pipermail/webkit-dev/2012-November/023032.html>

[21] [CITE[''''''[''''''webkit-dev'''''']'''''' Feature announcement: HTMLTemplateElement]]
( ([TIME[2012-11-30 23:00:56 +09:00]] 版))
<http://lists.webkit.org/pipermail/webkit-dev/2012-November/023032.html>

[22] [CITE@en[HTML Templates]]
( ([TIME[2013-02-13 22:43:32 +09:00]] 版))
<http://www.w3.org/TR/2013/WD-html-templates-20130214/>

[23] [CITE@en-US[XBL 2.0]]
( ([TIME[2012-05-03 02:23:03 +09:00]] 版))
<http://dev.w3.org/2006/xbl2/Overview.html#the-template-element>

[24] [CITE@en-US[XBL 2.0]]
( ([TIME[2012-05-03 02:23:03 +09:00]] 版))
<http://dev.w3.org/2006/xbl2/Overview.html#the-htmltemplateelement-interface>

[25] [CITE@en[''''''[''''''html-templates'''''']'''''' Seeking pre-LC comments for HTML Templates; deadline  June 10]]
( ([[Arthur Barstow]] 著, [TIME[2013-06-03 22:32:29 +09:00]] 版))
<http://lists.w3.org/Archives/Public/public-webapps/2013AprJun/0845.html>

[26] [CITE[IRC logs: freenode / #whatwg / 20130614]]
( ([TIME[2013-06-16 20:47:50 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20130614>

-
[27] [CITE@en[Web Applications 1.0 r8000      Integrate <template> into HTML.]]
( ([TIME[2013-06-29 07:44:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=7999&to=8000>
-- [97] 
[CITE@en['''['''cgiow''']''' (1) Integrate <template> into HTML.]], [[Hixie]], [TIME[2013-06-29 07:44:17 +09:00]], [TIME[2024-09-06T15:03:22.000Z]] <https://github.com/whatwg/html/commit/685a5e0b27e963f6b0a62a21cb95078171076e3b#diff-41cf6794ba4200b839c53531555f0f3998df4cbb01a4d5cb0b94e3ca5e23947d>

[28] [CITE[IRC logs: freenode / #whatwg / 20130625]]
( ([TIME[2013-06-30 00:43:15 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20130625>

[FIG(data)[ [216] [[HTML要素概説]]

:[F[要素名]]:[CODE[template]]
:日付:[TIME[2013-06-28]]
:説明:
[TIME[2013-06-28]]、
[CITE[HTML Standard]]
に
[CODE[template]]
が追加された。
[CITE[HTML Templates]]
の成果を取り込んだものである。
現行仕様である。
:出典:
[REFS[

-
[CITE[HTML r7000]],
[DATA(.author)[[[Hixie]]]], 
[TIME(.published)[2013-06-29 07:44:17 +09:00]], [TIME[2024-09-06T15:03:22.000Z]] <https://github.com/whatwg/html/commit/685a5e0b27e963f6b0a62a21cb95078171076e3b>

]REFS]

]FIG]

[29] [CITE[IRC logs: freenode / #whatwg / 20130725]]
( ([TIME[2013-07-26 16:12:52 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20130725>

[30] [CITE@en[Web Applications 1.0 r8115     Make <form><template><input> not result in the <input> being in the <form>.]]
( ([TIME[2013-08-02 05:14:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=8114&to=8115>

[31] [CITE@en[Web Applications 1.0 r8179       Have </head><template></template> go in the <head> for consistency with other elements.]]
( ([TIME[2013-09-13 05:25:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=8178&to=8179>

[32] [CITE@en[Web Applications 1.0 r8218     Update the HTML parser to handle <html><head></head><template></template>]]
( ([TIME[2013-10-10 07:35:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=8217&to=8218>

[33] [CITE@en[HTML Templates]]
( ([TIME[2013-10-11 11:37:35 +09:00]] 版))
<https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html>

[34] [CITE[''''''[''''''whatwg'''''']'''''' The src-N proposal]]
( ([TIME[2013-11-08 20:17:35 +09:00]] 版))
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2013-November/041374.html>

[35] [CITE@en[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>')]]
( ([TIME[2013-11-19 08:34:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=8292&to=8293>

* 関連

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

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

[55] [CITE@en-US[XML Binding Language (XBL) 2.0]]
( ([TIME[2007-03-16 22:20:16 +09:00]] 版))
<http://www.w3.org/TR/2007/CR-xbl-20070316/#the-template>

[56] [CITE@en-US[XML Binding Language (XBL) 2.0]]
( ([TIME[2007-03-16 22:20:16 +09:00]] 版))
<http://www.w3.org/TR/2007/CR-xbl-20070316/#rules>

[57] [CITE[IRC logs: freenode / #whatwg / 20140321]]
( ([TIME[2014-03-23 10:53:48 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20140321>

[58] [CITE[''''''[''''''whatwg'''''']'''''' template element?]]
( ([TIME[2014-04-10 19:48:07 +09:00]] 版))
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2004-July/170894.html>

[59] [CITE@en[Web Applications 1.0 r8679       PARSER: Change whether <template><td></template> is a parse error]]
( ([TIME[2014-06-14 07:00:00 +09:00]] 版))
<http://html5.org/r/8679>

[60] [CITE@en[Web Applications 1.0 r8657       Reduce redundant parse errors in some edge cases involving EOFs in elements in templates.]]
( ([TIME[2014-06-05 12:09:00 +09:00]] 版))
<http://html5.org/r/8657>

[61] [CITE@en[HTML Templates]]
( ([TIME[2014-08-05 02:01:58 +09:00]] 版))
<https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/templates/index.html>

[62] [CITE@en[HTML Templates]]
( ([TIME[2014-08-05 02:02:45 +09:00]] 版))
<https://dvcs.w3.org/hg/webcomponents/raw-file/4c6f1a9b432a/spec/templates/index.html>

[63] [CITE@en[Introduction to Web Components]]
( ([TIME[2013-06-05 15:53:16 +09:00]] 版))
<http://www.w3.org/TR/2013/WD-components-intro-20130606/#template-section>

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

[FIG(quote)[
[FIGCAPTION[
[3] [CITE@en-US[Microsoft Edge and Web Components | Microsoft Edge Dev Blog]]
([TIME[2015-07-16 11:01:48 +09:00]] 版)
<http://blogs.windows.com/msedgedev/2015/07/15/microsoft-edge-and-web-components/>
]FIGCAPTION]

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

]FIG]

[4] [[Google]] は [CODE(HTMLe)@en[[[template]]]] の[[内容]]も検索結果の表示に反映させるようです。
[TIME[2015-10-28T07:39:44.700Z]]

[FIG(quote)[
[FIGCAPTION[
[5] [CITE@en[amphtml/amp-html-format.md at master · ampproject/amphtml]]
([TIME[2016-07-04 11:15:59 +09:00]])
<https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md>
]FIGCAPTION]

> <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.

]FIG]

[6] [CITE@en[Allow anything in <template> for document conformance]]
([[zcorpan]]著, [TIME[2016-07-08 03:42:26 +09:00]])
<https://github.com/whatwg/html/commit/950d3015bead974bec1d7d86c00d641655ea0b66>

[7] [CITE@en['''['''cgiowt''']''' (3) PARSER: Change whether <template><td></template> is a pa…]]
([[Hixie]]著, [TIME[2014-06-14 07:00:22 +09:00]])
<https://github.com/whatwg/html/commit/b29ecbe1b74218130ba5c82fa79a943a35f3daea>

[70] [CITE@en[Clarify template content model and syntax]]
([[sideshowbarker]]著, [TIME[2017-09-16 11:44:56 +09:00]])
<https://github.com/whatwg/html/commit/3f1cd0163b518d0451b1d4ab90bf35ae43e6932d>

[71] [CITE@en[Template element: "Content model: Nothing." · Issue #3021 · whatwg/html]]
([TIME[2017-09-17 11:23:54 +09:00]])
<https://github.com/whatwg/html/issues/3021>

[72] [CITE@en[Editorial: template *Content model* ➡️ “See prose” by sideshowbarker · Pull Request #3031 · whatwg/html]]
([TIME[2017-09-17 11:25:13 +09:00]])
<https://github.com/whatwg/html/pull/3031>

[73] [CITE@en[Create Template-Instantiation.md]]
([[rniwa]]著, [TIME[2017-11-02 09:09:18 +09:00]])
<https://github.com/w3c/webcomponents/commit/4f63679ecbae4a66ec533370c8785bee516e403c>

[74] [CITE@en[Fixed a typo in Template-Instantiation.md.]]
([[rniwa]]著, [TIME[2017-11-02 09:10:37 +09:00]])
<https://github.com/w3c/webcomponents/commit/652c32a79814d5e595fa30af1a688b69dc20feba>

[75] [CITE@en[Copy-edits to Use Cases & Background sections (#679)]]
([[sideshowbarker]]著, [TIME[2017-11-02 12:27:48 +09:00]])
<https://github.com/w3c/webcomponents/commit/cb01606118d95885401fa9b5e6c21a2ed6cfa666>

[76] [CITE@en[Copy-edits to Use Cases & Background sections by sideshowbarker · Pull Request #679 · w3c/webcomponents]]
([TIME[2017-11-03 14:17:36 +09:00]])
<https://github.com/w3c/webcomponents/pull/679>

[77] [CITE@en[Copy edits to sections 3.1 and 3.2 (#686)]]
([[sideshowbarker]]著, [TIME[2017-11-02 18:04:49 +09:00]])
<https://github.com/w3c/webcomponents/commit/1185857719557630cae93775d460143c36bb5e4c>

[78] [CITE@en[Copy edits to sections 3.1 and 3.2 by sideshowbarker · Pull Request #686 · w3c/webcomponents]]
([TIME[2017-11-03 14:19:29 +09:00]])
<https://github.com/w3c/webcomponents/pull/686>

[79] [CITE@en[Fix Handlebars typos (#692)]]
([[padamczewski]]著, [TIME[2017-11-03 06:27:18 +09:00]])
<https://github.com/w3c/webcomponents/commit/f3fde5adc7354521330264b40379520a63470b0c>

[80] [CITE@en[Fix Handlebars typos by padamczewski · Pull Request #692 · w3c/webcomponents]]
([TIME[2017-11-03 14:20:29 +09:00]])
<https://github.com/w3c/webcomponents/pull/692>

[81] [CITE@en[Fix markdown styles of Template-Instantiation (#691)]]
([[koba04]]著, [TIME[2017-11-03 06:28:10 +09:00]])
<https://github.com/w3c/webcomponents/commit/26f1f00fa893b1e6afcaffe88db043393724503c>

[82] [CITE@en[Fix Markdown styles of Template-Instantiation by koba04 · Pull Request #691 · w3c/webcomponents]]
([TIME[2017-11-03 14:20:57 +09:00]])
<https://github.com/w3c/webcomponents/pull/691>

[83] [CITE@en[Removed erroneous markdown symbols in the sample code]]
([[rniwa]]著, [TIME[2017-11-03 06:42:37 +09:00]])
<https://github.com/w3c/webcomponents/commit/a0f3ad2bd1688ca02a94bb8d4e7c927b00ce17a6>

[84] [CITE@en['''['''templates''']''' Unclear usage of markdown-like syntax in state object · Issue #689 · w3c/webcomponents]]
([TIME[2017-11-03 14:21:31 +09:00]])
<https://github.com/w3c/webcomponents/issues/689>

[85] [CITE@en['''['''templates''']''' Unclear usage of markdown-like syntax in state object · Issue #689 · w3c/webcomponents]]
([TIME[2017-11-03 14:33:10 +09:00]])
<https://github.com/w3c/webcomponents/issues/689>

[86] [CITE@en[Fix template instantiation examples (#694)]]
([[zcei]]著, [TIME[2017-11-03 07:18:30 +09:00]])
<https://github.com/w3c/webcomponents/commit/7d97aca1c0a3737725a95feda65d78bd15116ad7>

[87] [CITE@en[Fix template instantiation examples by zcei · Pull Request #694 · w3c/webcomponents]]
([TIME[2017-11-03 14:34:21 +09:00]])
<https://github.com/w3c/webcomponents/pull/694>

[88] [CITE@en[Fix some errors in Template-Instantiation.md (#699)]]
([[rkusa]]著, [TIME[2017-11-07 02:06:22 +09:00]])
<https://github.com/w3c/webcomponents/commit/8a268a4c472a6d95fb2f434fc7f85702b7e3665c>

[89] [CITE@en[Add a missing parenthesis (#698)]]
([[koba04]]著, [TIME[2017-11-07 02:06:41 +09:00]])
<https://github.com/w3c/webcomponents/commit/a917d7f7b18186d039769ea183afd2da5efd6f70>

[90] [CITE@en[Highlight code blocks, fix emphasis (#712)]]
([[wiinci]]著, [TIME[2017-12-05 07:09:18 +09:00]])
<https://github.com/w3c/webcomponents/commit/8f353b61e1e13fd6192e80543a17c89a73d941a8>

[91] [CITE@en[Highlight code blocks, fix emphasis by wiinci · Pull Request #712 · w3c/webcomponents]]
([TIME[2017-12-08 01:01:24 +09:00]])
<https://github.com/w3c/webcomponents/pull/712>

[92] [CITE@en[Template in a SVG context does not have any content · Issue #3553 · whatwg/html]]
([TIME[2018-03-23 02:08:54 +09:00]])
<https://github.com/whatwg/html/issues/3553>

[FIG(quote)[
[FIGCAPTION[
[94] [CITE@en-US[CSS Modules | Vue Loader]]
([TIME[2021-06-14T02:34:48.000Z]])
<https://vue-loader.vuejs.org/guide/css-modules.html#usage>
]FIGCAPTION]

> You can then use it in your templates with a dynamic class binding:
> <template>
>   <p :class="$style.red">

]FIG]

[FIG(quote)[
[FIGCAPTION[
[95] [CITE@en-US[Functional Components | Vue Loader]]
([TIME[2021-06-14T02:35:36.000Z]])
<https://vue-loader.vuejs.org/guide/functional.html>
]FIGCAPTION]

> 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>

]FIG]

[FIG(quote)[
[FIGCAPTION[
[96] [CITE@en-US[Using Pre-Processors | Vue Loader]]
([TIME[2021-06-14T02:37:20.000Z]])
<https://vue-loader.vuejs.org/guide/pre-processors.html#pug>
]FIGCAPTION]

> <template lang="pug">
> div
>   h1 Hello world!
> </template>

]FIG]

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)