内建的 <template> 元素用来存储 HTML 模板。浏览器将忽略它的内容，仅检查语法的有效性，但是我们可以在 JavaScript 中访问和使用它来创建其他元素。
从理论上讲，我们可以在 HTML 中的任何位置创建不可见元素来储存 HTML 模板。那 <template> 元素有什么优势？
首先，其内容可以是任何有效的HTML，即使它通常需要特定的封闭标签。
例如，我们可以在其中放置一行表格 <tr> ：
<template>
<tr>
<td>Contents</td>
</tr>
</template>通常，如果我们在 <tr> 内放置类似 <div> 的元素，浏览器会检测到无效的 DOM 结构并对其进行“修复”，然后用 <table> 封闭 <tr> ，那不是我们想要的。而 <template> 则完全保留我们储存的内容。
我们也可以将样式和脚本放入 <template> 元素中：
<template>
<style>
p { font-weight: bold; }
</style>
<script>
alert("Hello");
</script>
</template>浏览器认为 <template> 的内容“不在文档中”：样式不会被应用，脚本也不会被执行， <video autoplay> 也不会运行，等。
当我们将内容插入文档时，该内容将变为活动状态（应用样式，运行脚本等）。
插入模板
模板的 content 属性可看作DocumentFragment —— 一种特殊的 DOM 节点。
我们可以将其视为普通的DOM节点，除了它有一个特殊属性：将其插入某个位置时，会被插入的则是其子节点。
例如：
<template id="tmpl">
<script>
alert("Hello");
</script>
<div class="message">Hello, world!</div>
</template>
<script>
let elem = document.createElement('div');
// Clone the template content to reuse it multiple times
elem.append(tmpl.content.cloneNode(true));
document.body.append(elem);
// Now the script from <template> runs
</script>让我们用 <template> 重写上一章的 Shadow DOM 示例：
<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 = "Hello from the shadows!";
};
</script>在 (*) 行，我们将 tmpl.content 作为 DocumentFragment 克隆和插入，它的子节点（<style>，<p>）将代为插入。
它们会变成一个 Shadow DOM：
<div id="elem">
#shadow-root
<style> p { font-weight: bold; } </style>
<p id="message"></p>
</div>总结
总结一下：
<template>的内容可以是任何语法正确的 HTML。<template>内容被视为“超出文档范围”，因此它不会产生任何影响。- 我们可以在JavaScript 中访问
template.content，将其克隆以在新组件中重复使用。
<template> 标签非常独特，因为：
- 浏览器将检查其中的HTML语法（与在脚本中使用模板字符串不同）。
- 但允许使用任何顶级 HTML 标签，即使没有适当包装元素的无意义的元素（例如
<tr>）。 - 其内容是交互式的：插入其文档后，脚本会运行，
<video autoplay>会自动播放。
<template> 元素不具有任何迭代机制，数据绑定或变量替换的功能，但我们可以在其基础上实现这些功能。