前言
在之前介绍创建 Custom Elements 的代码中，有一个地方是比较繁琐的：Shadow DOM 中的每个子元素都是通过 document.createElement 方法创建的。就像下面这样的：
那到底有没有方法能简化这一步操作呢？答案是有的，就是我们今天要介绍的主角 —— Template。
Templates 的概念
引用 MDN 上的原话是：
HTML内容模板（
<template>）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以(原文为 may be)在运行时使用 JavaScript 实例化。
将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理
<template>元素的内容，但这样做只是为了确保这些内容有效；但元素内容不会被渲染。
通过这个概念解释，我们可以知道关于 Templates 的以下几点：
- 它是在 HTML 页面中使用的一组元素标签，即
<template></template>； - 它在 HTML 页面解析的过程中会被处理，但不会呈现在页面上；
- 它可以被 JavaScript 获取到。
Templates 是较早之前出现的，比 Web Components 更早。
Templates 的属性
Templates 除了全局属性（也就是所有 HTML 元素所共有的属性）外，只有一个私有属性 ：content，这个属性是只读的，返回 Templates 内部的文档片段对象及其 DOM 结构。
在控制台操控一下template，结果如下：
我们可以将 templateEle.content 当做一个正常的 document 对象来使用。
简单使用 Templates
仅 HTML + Templates
<body> <h1>使用 Templates</h1> <template> <div> 这是 template 标签内的子节点内容 </div> </template> </body>
页面显示效果如下：
符合以上两点：被解析、不渲染。
使用 JS
如果想要将 Templates 中的节点内容加载到当前页面显示出来，我们可以使用一下 JS 代码实现：
// 获取 template 元素 const templateEle = document.querySelector("template"); // 获取 template 元素包含的文档片段 const content = templateEle.content; // content 可以当做正常的 document 来使用 const node = content.querySelector("div"); // 追加节点到当前文档 document.body.appendChild(node);
最终效果如下：
但是这样操作的话，就存在一个缺陷，由于将 Templates 代码片段内部的 div 追加到了当前文档结构，所以 Templates 内部的 div 节点消失。
为了避免修改内容模板内部的 DOM 结构，我们可以先克隆模板内部的元素节点，再将克隆的节点追到到当前文档：
// 获取 template 元素 const templateEle = document.querySelector("template"); // 获取 template 元素包含的文档片段 const content = templateEle.content; // content 可以当做正常的 document 来使用 const node = content.querySelector("div"); // 导入 node 到 当前文档 // 必须要有这一步 const cloneNode = document.importNode(node, true); // 也可以使用 cloneNode // const cloneNode = node.cloneNode(true); // 追加节点到当前文档 document.body.appendChild(cloneNode);
Templates 的兼容性
结束语
Templates 可以将一些页面内容事先封装并且保存在 HTML 页面上，且不进行渲染，随后可以使用 JS 来操作 Templates。
以上就是 Templates 的有关知识点。
~ 本文完，感谢阅读！
学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！
