template标签天生不渲染，这是HTML5明确规定的语义行为：其内容转为离线DocumentFragment，不解析、不渲染、不加载资源、不执行脚本，仅供JavaScript通过content.cloneNode(true)克隆后插入DOM使用。
template标签天生不渲染，这是设计使然
<template> 标签的内容在 DOM 中存在，但浏览器**不会将其渲染到页面上**，也不会触发任何资源加载（比如 <img> 不会发请求、<script> 不会执行）。这不是 bug，而是 HTML5 明确规定的语义行为：它是一个“离线”模板容器，只供 JavaScript 克隆使用。
常见错误现象包括：
- 写了
<template><div>hello</div></template>，但页面空白，以为代码没生效 - 在
<template>里放了<img src="logo.png">，Network 面板看不到请求，误判路径错 - 用 CSS 试图给
template或其子元素加display: block，完全无效——因为 template 的 content 不参与渲染流
想让它“出现”，必须用 JS 显式克隆并插入
直接把 <template> 当普通容器写进 HTML 是没用的。要让内容可见，必须走标准流程：取 content → cloneNode(true) → append 到可渲染位置。
关键点：
立即学习“前端免费学习笔记（深入）”；
-
template.content是一个DocumentFragment，不能直接 append；必须用cloneNode(true)复制一份 - 不能用
innerHTML读取template内容——它返回空字符串；必须通过content属性访问 - 插入目标必须是已挂载的 DOM 节点（如
document.body），不能插到另一个<template>里
最小可行示例：
<template id="card">
<article class="card">
<h3>标题</h3>
<p>正文</p>
</article>
</template>
<button onclick="renderCard()">渲染卡片</button>
<script>
function renderCard() {
const tmpl = document.getElementById('card');
const clone = tmpl.content.cloneNode(true); // ✅ 必须 clone
document.body.appendChild(clone); // ✅ 插入真实 DOM
}
</script>
容易被忽略的兼容性与性能细节
<template> 在所有现代浏览器中都支持（Chrome 26+、Firefox 22+、Edge 13+、Safari 6.1+），但有两点实操中常踩坑：
- 服务端渲染（SSR）或静态生成时，
<template>内容**不会被预渲染到 HTML 字符串中**，因为服务端不执行 JS；若依赖首屏内容，得改用<script type="text/template">或服务端模板 - 频繁调用
cloneNode(true)并插入大量节点，可能触发重排；建议批量操作或用DocumentFragment中转 - 如果 template 内含自定义元素或需要初始化的组件（如 Web Components），克隆后需手动调用
customElements.upgrade()，否则生命周期钩子不触发
替代方案对比：什么时候不该用 template
不是所有“隐藏内容”场景都适合 <template>：
- 纯 CSS 控制显隐（如
display: none/visibility: hidden）——更适合小范围、状态频繁切换的 UI 块，避免反复克隆开销 - 服务端已知的静态结构——直接写 HTML 更轻量，
<template>反而多一层 JS 绑定 - 需要 SEO 抓取的内容——
<template>内容不会被爬虫索引，得确保关键文本仍存在于主 DOM 中
真正发挥价值的场景是：动态生成结构一致但数据不同的节点（如列表项、表单字段组、弹窗模板），且这些节点**初始不可见、按需创建、不共享状态**。这时候，<template> 提供的是语义清晰 + 性能可控 + DOM 隔离三重保障。
