HTML 内容模板 (
<template>
) element
is a mechanism for holding
HTML
that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript.
Think of a template as a content fragment that is being stored for subsequent use in the document. While the parser does process the contents of the
<template>
element while loading the page, it does so only to ensure that those contents are valid; the element's contents are not rendered, however.
| 内容类别 | 元数据内容 , flow content , 措词内容 , script-supporting element |
|---|---|
| 准许内容 | No restrictions |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parents |
Any element that accepts
metadata content
,
措词内容
，或
script-supporting elements
. Also allowed as a child of a
<colgroup>
element that does
not
拥有
span
属性。
|
| Implicit ARIA role | 无对应角色 |
| Permitted ARIA roles |
No
role
permitted
|
| DOM 接口 |
HTMLTemplateElement
|
此元素只包括 全局属性 .
不管怎样，
HTMLTemplateElement
拥有
content
property, which is a read-only
DocumentFragment
containing the DOM subtree which the template represents. Note that directly using the value of the
content
could lead to unexpected behavior, see
Avoiding DocumentFragment pitfall
以下章节。
First we start with the HTML portion of the example.
<table id="producttable">
<thead>
<tr>
<td>UPC_Code</td>
<td>Product_Name</td>
</tr>
</thead>
<tbody>
<!-- existing data could optionally be included here -->
</tbody>
</table>
<template id="productrow">
<tr>
<td class="record"></td>
<td></td>
</tr>
</template>
First, we have a table into which we will later insert content using JavaScript code. Then comes the template, which describes the structure of an HTML fragment representing a single table row.
Now that the table has been created and the template defined, we use JavaScript to insert rows into the table, with each row being constructed using the template as its basis.
// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {
// Instantiate the table with the existing HTML tbody
// and the row with the template
var tbody = document.querySelector("tbody");
var template = document.querySelector('#productrow');
// Clone the new row and insert it into the table
var clone = template.content.cloneNode(true);
var td = clone.querySelectorAll("td");
td[0].textContent = "1235646565";
td[1].textContent = "Stuff";
tbody.appendChild(clone);
// Clone the new row and insert it into the table
var clone2 = template.content.cloneNode(true);
td = clone2.querySelectorAll("td");
td[0].textContent = "0384928528";
td[1].textContent = "Acme Kidney Beans 2";
tbody.appendChild(clone2);
} else {
// Find another way to add the rows to the table because
// the HTML template element is not supported.
}
The result is the original HTML table, with two new rows appended to it via JavaScript:
table {
background: #000;
}
table td {
background: #fff;
}
A
DocumentFragment
is not a valid target for various events, as such it is often preferable to clone or refer to the elements within it.
Consider the following HTML and JavaScript:
<div id="container"></div> <template id="template"> <div>Click me</div> </template>
const container = document.getElementById("container");
const template = document.getElementById("template");
function clickHandler(event) {
alert("Clicked a div");
}
const firstClone = template.content.cloneNode(true);
firstClone.addEventListener("click", clickHandler);
container.appendChild(firstClone);
const secondClone = template.content.firstElementChild.cloneNode(true);
secondClone.addEventListener("click", clickHandler);
container.appendChild(secondClone);
firstClone
is a DocumentFragment instance, so while it gets appended inside the container as expected, clicking on it does not trigger the click event.
secondClone
是
HTMLDivElement
instance, clicking on it works as one would expect.
| 规范 | 状态 | 注释 |
|---|---|---|
|
HTML 实时标准
The definition of 'template element' in that specification. |
实时标准 | |
|
HTML5
The definition of 'template element' in that specification. |
推荐 | 初始定义 |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
template
|
Chrome 完整支持 26 | Edge 完整支持 13 | Firefox 完整支持 22 | IE 不支持 No | Opera 完整支持 15 | Safari 完整支持 8 | WebView Android 完整支持 Yes | Chrome Android 完整支持 26 | Firefox Android 完整支持 22 | Opera Android ? | Safari iOS 完整支持 8 | Samsung Internet Android 完整支持 1.5 |
完整支持
不支持
兼容性未知
<slot>
(and historical:
<shadow>
)
<content>
<shadow>
<slot>
<template>