模板元素

优质

小牛编辑

125浏览

2023-12-01

内建的 <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> 元素不具有任何迭代机制，数据绑定或变量替换的功能，但我们可以在其基础上实现这些功能。