html的<template>标签主要作用是存储未激活的html内容片段。1. 它在页面加载时不被渲染或执行，保持惰性状态，直到javascript显式克隆并插入到dom中；2. 与隐藏的div相比，<template>内部的内容不会消耗资源，如加载图片或构建dom树；3. <template>常用于构建可复用ui组件、延迟加载内容，并结合web components和shadow dom实现组件化开发，提供结构、样式和逻辑的封装能力。
HTML的<template>标签主要作用是作为一种存储HTML内容片段的容器，这些内容在页面加载时并不会被浏览器渲染或执行，而是保持“惰性”状态，直到被JavaScript显式地克隆并插入到文档中。你可以把它想象成一个蓝图或者一个待命的组件骨架，随时准备被实例化。
解决方案
使用<template>标签非常直接。你只需将需要复用或延迟加载的HTML结构包裹在<template>标签内部。
<template id="myCardTemplate">
<style>
.card {
border: 1px solid #ddd;
padding: 15px;
margin-bottom: 10px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
background-color: #fff;
}
.card h3 {
color: #333;
margin-top: 0;
}
.card p {
color: #666;
}
</style>
<div class="card">
<h3>卡片标题</h3>
<p>这是一段卡片内容。</p>
<button>点击我</button>
</div>
</template>
<div id="container"></div>
<script>
// 获取模板元素
const template = document.getElementById('myCardTemplate');
// 获取要插入内容的容器
const container = document.getElementById('container');
// 克隆模板内容
// importNode的第二个参数true表示深度克隆，包括所有子节点
const clone = document.importNode(template.content, true);
// 修改克隆后的内容（可选）
clone.querySelector('h3').textContent = '新生成的卡片';
clone.querySelector('p').textContent = '这是通过JavaScript动态添加的卡片内容。';
clone.querySelector('button').addEventListener('click', () => {
alert('按钮被点击了！');
});
// 将克隆的内容添加到DOM中
container.appendChild(clone);
// 可以再次克隆并添加，实现复用
const anotherClone = document.importNode(template.content, true);
anotherClone.querySelector('h3').textContent = '另一张卡片';
anotherClone.querySelector('p').textContent = '这是第二张卡片。';
container.appendChild(anotherClone);
</script>在上面的例子中，<template>内部的HTML和CSS在页面加载时并不会显示出来。只有当JavaScript获取到这个模板（template.content会返回一个DocumentFragment），并将其克隆（document.importNode）然后插入到实际的DOM中时，这些内容才会被渲染和激活。这种模式对于构建可复用UI组件、延迟加载内容或在运行时动态生成大量相同结构元素非常有用。
立即学习“前端免费学习笔记（深入）”；
为什么选择<template>而不是隐藏的div？
这是一个非常常见的问题，我个人在项目里也遇到过很多次。很多人习惯用一个带有display: none;或visibility: hidden;样式的div来隐藏内容，但从性能和语义上讲，<template>无疑是更优的选择。当一个div被隐藏时，浏览器仍然会解析它的内容，构建相应的DOM树，甚至会尝试加载其中的资源（比如<img>标签的图片或者<link>标签引用的样式表）。这些操作都会消耗计算资源和网络带宽，即使这些内容最终是不可见的。
而<template>标签内部的内容则完全是惰性的。浏览器会跳过对它的解析和渲染，不会加载内部的图片、脚本或样式表，也不会为它构建DOM树。这意味着它对页面的初始加载性能几乎没有影响。只有当你通过JavaScript明确地克隆并将其插入到活动文档中时，它才会被“激活”。这种本质的区别让<template>成为处理大量可复用或延迟加载内容的理想选择，避免了不必要的资源浪费。从语义上说，<template>也更清晰地表达了其内容的意图——它是一个模板，而不是一个暂时隐藏的普通元素。
<template>内容能否交互或被样式化？
是的，但你需要理解其“惰性”的本质。当你把HTML结构放在<template>标签内部时，它里面的所有内容，包括<style>标签、<script>标签、事件监听器（比如onclick属性）等，都是不活跃的。这意味着：
-
样式： 内部的
<style>标签不会立即生效，外部样式表（通过<link>引入的）也不会被加载。只有当<template>的内容被克隆并添加到页面的实时DOM中后，这些样式才会被应用，内部的<style>标签也会开始影响其作用域内的元素，而外部样式表则会被浏览器加载并解析。当然，全局的CSS规则在内容被添加到DOM后，自然也会作用于这些元素。 -
脚本： 放在
<template>内部的<script>标签在模板未被激活前是不会执行的。这是一个非常强大的特性，因为它允许你延迟加载和执行脚本，直到它们真正需要的时候。同样，任何通过HTML属性（如onclick）定义的事件处理器也不会在模板中被激活，它们只会在克隆后的元素被插入到DOM中后才开始监听事件。
我个人在处理复杂组件时，经常利用<template>来存放组件的HTML结构和内部样式，然后通过JavaScript在组件被实例化时将这些内容“激活”并挂载到Shadow DOM中，这样可以更好地实现样式和逻辑的封装。这种延迟加载和激活的机制，正是<template>在构建高性能Web应用中不可或缺的原因。
<template>与Web Components和Shadow DOM的关系是什么？
<template>标签是Web Components三大核心技术之一（另外两个是Custom Elements和Shadow DOM）的基石。它们三者协同工作，为我们提供了在浏览器中构建可复用、封装的组件的能力，这在以前通常需要依赖大型JavaScript框架才能实现。
-
Custom Elements（自定义元素） 允许你定义自己的HTML标签，比如
<my-custom-component>。当你定义一个自定义元素时，通常会在其类的构造函数中，从一个<template>中获取HTML结构。 -
Shadow DOM（影子DOM） 提供了一种将DOM和CSS封装在组件内部的方式，使其与主文档的DOM和CSS隔离。这解决了组件样式泄漏或被外部样式污染的问题。而
<template>的内容，正是经常被克隆并附加到自定义元素的Shadow DOM根节点上的。
想象一下这个工作流程：你首先在<template>里定义了你的组件的视觉结构和内部样式。然后，你创建一个Custom Element，在这个自定义元素的生命周期方法（比如connectedCallback）中，你获取这个<template>的内容，克隆它，然后将克隆出来的DocumentFragment附加到该自定义元素的Shadow DOM上。这样，你的组件就拥有了独立的HTML结构、独立的样式作用域，并且其内部的逻辑（通过<script>或事件监听器实现）只在组件被添加到页面时才被激活。
在我看来，<template>是实现“组件化”概念的真正原生HTML支持。它提供了一个干净、高效的方式来声明组件的UI模板，而无需在JavaScript中手动构建复杂的DOM结构或拼接HTML字符串。结合Custom Elements和Shadow DOM，我们能够构建出真正独立、可维护、可复用的UI组件，这对于大型应用开发和团队协作来说，是极大的福音。
