内建的 <template> 元素用来存储 HTML 模板。浏览器将忽略它的内容,仅检查语法的有效性,但是我们可以在 JavaScript 中访问和使用它来创建其他元素。

从理论上讲,我们可以在 HTML 中的任何位置创建不可见元素来储存 HTML 模板。那 <template> 元素有什么优势?

首先,其内容可以是任何有效的HTML,即使它通常需要特定的封闭标签。

例如,我们可以在其中放置一行表格 <tr>

  1. <template>
  2. <tr>
  3. <td>Contents</td>
  4. </tr>
  5. </template>

通常,如果我们在 <tr> 内放置类似 <div> 的元素,浏览器会检测到无效的 DOM 结构并对其进行“修复”,然后用 <table> 封闭 <tr> ,那不是我们想要的。而 <template> 则完全保留我们储存的内容。

我们也可以将样式和脚本放入 <template> 元素中:

  1. <template>
  2. <style>
  3. p { font-weight: bold; }
  4. </style>
  5. <script>
  6. alert("Hello");
  7. </script>
  8. </template>

浏览器认为 <template> 的内容“不在文档中”:样式不会被应用,脚本也不会被执行, <video autoplay> 也不会运行,等。

当我们将内容插入文档时,该内容将变为活动状态(应用样式,运行脚本等)。

插入模板

模板的 content 属性可看作DocumentFragment —— 一种特殊的 DOM 节点。

我们可以将其视为普通的DOM节点,除了它有一个特殊属性:将其插入某个位置时,会被插入的则是其子节点。

例如:

  1. <template id="tmpl">
  2. <script>
  3. alert("Hello");
  4. </script>
  5. <div class="message">Hello, world!</div>
  6. </template>
  7. <script>
  8. let elem = document.createElement('div');
  9. // Clone the template content to reuse it multiple times
  10. elem.append(tmpl.content.cloneNode(true));
  11. document.body.append(elem);
  12. // Now the script from <template> runs
  13. </script>

让我们用 <template> 重写上一章的 Shadow DOM 示例:

  1. <template id="tmpl">
  2. <style> p { font-weight: bold; } </style>
  3. <p id="message"></p>
  4. </template>
  5. <div id="elem">Click me</div>
  6. <script>
  7. elem.onclick = function() {
  8. elem.attachShadow({mode: 'open'});
  9. elem.shadowRoot.append(tmpl.content.cloneNode(true)); // (*)
  10. elem.shadowRoot.getElementById('message').innerHTML = "Hello from the shadows!";
  11. };
  12. </script>

(*) 行,我们将 tmpl.content 作为 DocumentFragment 克隆和插入,它的子节点(<style><p>)将代为插入。

它们会变成一个 Shadow DOM:

  1. <div id="elem">
  2. #shadow-root
  3. <style> p { font-weight: bold; } </style>
  4. <p id="message"></p>
  5. </div>

总结

总结一下:

  • <template> 的内容可以是任何语法正确的 HTML。
  • <template> 内容被视为“超出文档范围”,因此它不会产生任何影响。
  • 我们可以在JavaScript 中访问 template.content ,将其克隆以在新组件中重复使用。

<template> 标签非常独特,因为:

  • 浏览器将检查其中的HTML语法(与在脚本中使用模板字符串不同)。
  • 但允许使用任何顶级 HTML 标签,即使没有适当包装元素的无意义的元素(例如 <tr> )。
  • 其内容是交互式的:插入其文档后,脚本会运行, <video autoplay> 会自动播放。

<template> 元素不具有任何迭代机制,数据绑定或变量替换的功能,但我们可以在其基础上实现这些功能。