标签定义惰性html片段，页面加载时不渲染、不执行脚本、不加载资源；2. 使用javascript克隆其content属性（documentfragment）后插入dom才能激活内容；3. 相比display: none的隐藏div，不创建dom节点、不占用布局计算、更优性能；4. 在web components中，为自定义元素提供结构与样式，结合shadow dom实现封装和样式隔离；5. 注意模板内脚本不会自动执行，需手动创建新script插入；6. 模板内样式若插入light dom会全局生效，应结合shadow dom避免污染；7. 无原生数据绑定，需javascript手动更新内容；8. 现代浏览器支持良好，老旧浏览器需polyfill。因此，是构建可复用、高性能、封装良好组件的标准推荐方式。
HTML中的
标签是一个非常实用的机制，它允许你定义一段HTML内容，这段内容在页面加载时不会被浏览器立即渲染或执行，而是保持惰性，直到你通过JavaScript明确地将其激活并插入到文档中。简单来说，它就是一块“待命”的HTML片段，随时准备被克隆和使用。
解决方案
要理解
template标签的定义和作用，可以把它想象成一个蓝图或者模具。你在其中放置任何标准的HTML元素，比如
div、
p、
img，甚至是
script和
style标签。但关键在于，这些内容在浏览器解析到标签时，并不会被立即显示出来，也不会触发其中资源的加载（比如图片不会请求，脚本不会执行）。
定义一个HTML模板非常直接：
立即学习“前端免费学习笔记（深入）”；
你好，世界！
@@##@@
当你需要使用这个模板时，你需要用JavaScript来获取它，然后访问它的
content属性。
content属性返回一个
DocumentFragment，这是一种轻量级的文档对象，可以包含多个节点，但它本身不是DOM树的一部分。接着，你可以使用
document.importNode()方法来深度克隆这个
DocumentFragment，最后将克隆出来的节点插入到你希望的DOM位置。
const template = document.getElementById('myTemplate');
// 确保模板存在
if (template) {
// 克隆模板内容，true 表示深度克隆，包括所有子节点
const clone = document.importNode(template.content, true);
// 现在你可以操作这个克隆体了，比如修改里面的文本或属性
clone.querySelector('p').textContent = '这是从模板克隆出来的内容！';
clone.querySelector('img').src = 'actual-image.jpg';
// 将克隆体插入到页面的某个位置，例如 body
document.body.appendChild(clone);
// 此时，模板中的脚本才会执行
// 并且样式也会应用（如果它在Shadow DOM中，或者被直接插入到Light DOM）
}这种模式的优势在于，它提供了一种标准、高效的方式来处理可复用的UI片段，特别是在构建动态界面或者Web Components时，它的价值就显得尤为突出。
为什么我们应该优先考虑使用标签，而不是简单地隐藏一个div
？
这问题问得挺好，因为在
出现之前，很多人确实会用display: none;或者
visibility: hidden;来“藏”起一些暂时不用的HTML。但这两者之间，差异可大了，远不止是字面上的“隐藏”那么简单。
首先，一个被
display: none;的
div，尽管你在视觉上看不见它，但它依然是DOM树的一部分。这意味着浏览器在解析HTML时，会为它创建对应的DOM节点，分配内存，甚至如果里面有图片或视频，这些资源也可能在后台被加载。想象一下，如果你有几十个这样的隐藏
div，每个里面都塞满了复杂结构和资源，那页面的初始加载性能和内存占用都会受到影响。浏览器还是得去计算它的布局，只是最后不渲染出来罢了。
而
标签就完全不同了。它里面的内容是完全惰性的，或者说，是“非激活”状态的。浏览器会解析标签本身，但不会去解析它内部的HTML结构，更不会为内部元素创建DOM节点，不会触发图片、脚本的下载或执行。它就像一个纯粹的字符串容器，直到你用JavaScript明确地调用template.content并克隆它，里面的内容才会被“激活”，变成真正的DOM节点并参与到页面渲染中。
所以，从性能和资源管理的角度看，
是压倒性的胜利者。它提供了一种语义化的方式来声明“这是一个模板，不是当前可见的页面内容”，让浏览器可以更智能地处理。此外，display: none;的元素仍然可能被无障碍工具（如屏幕阅读器）发现，而的内容则不会，这在某些场景下也是一个优势。我个人觉得，当你需要复用或延迟加载复杂UI时，直接用，省心省力，也更符合现代Web开发的最佳实践。
标签在Web Components和Shadow DOM中扮演了怎样的角色？
说到现代前端，Web Components是绕不开的话题，而
在其中简直是核心中的核心，扮演着“基石”的角色。如果你尝试过手写一个Web Component，很快就会发现的便利性。
支持模板化设计，基于标签调用数据 支持N国语言，并能根据客户端自动识别当前语言 支持扩展现有的分类类型，并可修改当前主要分类的字段 支持静态化和伪静态 会员管理功能，询价、订单、收藏、短消息功能 基于组的管理员权限设置 支持在线新建、修改、删除模板 支持在线管理上传文件 使用最新的CKEditor作为后台可视化编辑器 支持无限级分类及分类的移动、合并、排序 专题管理、自定义模块管理 支持缩略图和图
Web Components旨在提供一种标准化的方式来创建可复用的、封装的组件。它主要由三部分组成：Custom Elements（自定义元素）、Shadow DOM（影子DOM）和HTML Templates（HTML模板）。
在这里的作用，就是为你的自定义元素提供一个结构化的、预定义好的内部DOM结构。通常，当我们创建一个自定义元素时，我们会将组件的内部结构和样式定义在一个
标签里。然后，在自定义元素的生命周期回调函数中（比如connectedCallback），我们会获取这个模板的内容，并通过
this.attachShadow({ mode: 'open' })创建一个Shadow DOM，最后将模板内容的克隆体附加到这个Shadow DOM中。
这里有个简单的例子：
// 定义一个模板
const myComponentTemplate = document.createElement('template');
myComponentTemplate.innerHTML = `
我的自定义组件标题
`;
// 定义自定义元素
class MyCustomElement extends HTMLElement {
constructor() {
super();
// 创建Shadow DOM
const shadowRoot = this.attachShadow({ mode: 'open' });
// 克隆模板内容并添加到Shadow DOM
shadowRoot.appendChild(myComponentTemplate.content.cloneNode(true));
}
connectedCallback() {
console.log('MyCustomElement 已添加到文档。');
}
}
// 注册自定义元素
customElements.define('my-custom-element', MyCustomElement);在使用这个组件时：
这是通过 slot 插入的内容。
你看，通过
，我们实现了组件内部结构和样式的封装。模板里的style标签只在Shadow DOM内部生效，不会污染全局样式。
元素则允许我们从外部向组件内部插入内容。这种模式极大地提升了组件的复用性、可维护性和样式隔离，让组件真正做到了“自包含”。没有，Web Components的开发体验和封装能力会大打折扣。
使用标签时有哪些常见的限制或潜在的坑？
虽然
标签强大且实用，但在实际使用中，确实有一些需要注意的地方，否则可能会遇到一些预料之外的行为。一个最常见的“坑”就是，你可能会想当然地认为放在
里的script标签会像普通HTML里的脚本一样，在模板被克隆并插入DOM后自动执行。但事实并非如此。里的脚本是惰性的，它们不会自动运行。即使你把模板内容克隆到DOM里，这些脚本也不会被浏览器执行。如果你真的需要执行模板内的脚本，你必须手动获取这些
script元素，然后创建一个新的
script元素，将旧脚本的
textContent赋值给新脚本，再将新脚本插入到DOM中，这样浏览器才会执行它。这听起来有点绕，但这是出于安全和性能的考虑。通常，我们会把逻辑放在外部的JavaScript中，而不是模板内部。
另一个需要留意的点是样式的作用域。如果你在
里放了一个