-
Notifications
You must be signed in to change notification settings - Fork 4
/
462.txt
294 lines (213 loc) · 15.2 KB
/
462.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
[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]
* 内容
[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ブラウザー]]に実装されることになり、
その懸念は打ち消されました。
[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>
[28] [CITE[IRC logs: freenode / #whatwg / 20130625]]
( ([TIME[2013-06-30 00:43:15 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20130625>
[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>