Template Element
Template Element （模板元素）
In this chapter, we cover a built-in template element, serving as a storage for HTML markup templates. Its contents are ignored by the browser. It only checks for syntax validity. However, it can be accessed and used in JavaScript for creating other elements. （在本章中，我们将介绍一个内置的模板元素，用作HTML标记模板的存储。其内容被浏览器忽略。它只检查语法有效性。但是，可以在JavaScript中访问和使用它来创建其他元素。）
Now, let’s see what is so unique about the <template>. First and foremost, any valid HTML can serve as its content. In the example below, a table row <tr> is placed there:
<template>
<tr>
<td>The Content</td>
</tr>
</template>
But, note that if you attempt to put <tr> in a <div>, the browser will detect an invalid DOM structure and fix it, adding <table> around.
Also, you can put scripts and styles into <template> like this:
<template>
<style>
p { font-weight: bold; }
</style>
<script>
alert("Welcome to w3cdoc");
</script>
</template>
So, the <template> content can be considered out of the document. Hence, styles will not be applied, scripts will not be executed. The content will become live only after inserting it into the document.
Inserting Template
Inserting Template （从模板插入）
The template content is reachable within its content property as a DocumentFragment (a specific DOM node type). （模板内容可以在其内容属性中作为DocumentFragment （特定的DOM节点类型）进行访问。）
It can be dealt with like any other DOM node, without a single specific property (while inserting it the children are inserted instead). （它可以像任何其他DOM节点一样处理，而无需单个特定属性（插入时会插入子节点）。）
Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<template id="tmpId">
<script>
alert("Welcome to w3cdoc");
</script>
<div class="message">Welcome to w3cdoc!</div>
</template>
<script>
let elem = document.createElement('div');
// Clone the contents of the template to use it several times
（//复制模板内容多次使用）
elem.append(tmpId.content.cloneNode(true));
document.body.append(elem);
// Now the script from <template> is run
</script>
</body>
</html>
We can also try to rewrite an example from Shadow DOM chapter by applying <template> like this:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<template id="tmpl">
<style> p { font-weight: bold; } </style>
<p id="message"></p>
</template>
<div id="elem">Click me</div>
<script>
elem.onclick = function() {
elem.attachShadow({mode: 'open'});
elem.shadowRoot.append(tmpl.content.cloneNode(true)); // (*)
elem.shadowRoot.getElementById('message').innerHTML = "Welcome to w3cdoc! Hello from the shadows";
};
</script>
</body>
</html>
In the (*) line, while cloning and inserting tmpl.content as its DocumentFragment, the children (<style>, <p>) will be inserted instead. The shadow DOM will be formed by them:
<div id="elem">
#shadow-root
<style> h1 { font-weight: bold; } </style>
<h1 id="message"></h1>
</div>
Summary
Summary （概要）
To be brief, the built-in <template> element represents a storage for HTML markup templates.
Any syntactically correct HTML can be <template>.
In case the <template> content doesn’t affect anything, it is considered “out of the document”. The template.content can be accessed from JavaScript, as well as be cloned for reusing in a new component.
The <template> element can’t feature any iteration mechanisms, data bindings, or variable substitutions but can perform that on top of it.