<template> 标签是惰性 DOM 容器，浏览器解析时跳过其内容，不构建节点、不执行脚本、不加载资源；必须用 document.importNode() 克隆并手动填充数据后插入才能显示。
<template> 标签不是组件，只是 DOM 片段容器；它不绑定数据、不响应更新、不执行脚本，必须配合 JS 手动克隆 + 填值 + 插入才能“活”起来。
为什么直接写 <template> 页面上什么也不显示
浏览器解析时会跳过 <template> 内容，既不构建 DOM 节点，也不加载图片、不执行内联 <script>、不解析 data-* 属性。常见错误是把它当 Vue 的 <template> 或 Web Component 的 <slot> 用，结果整个区域空白。
必须显式调用：
const tmpl = document.querySelector('#item-tmpl');
const clone = document.importNode(tmpl.content, true);
clone.querySelector('.title').textContent = item.title;
document.body.appendChild(clone);
-
document.importNode()是正确克隆方式，cloneNode(true)在某些旧环境可能丢失部分特性 - 不能对
<template>直接设innerHTML，否则它就失去“惰性”特性，变成普通 HTML 解析 - 若模板含
<img>或<iframe>，需在克隆后手动触发加载（如设置src）
<template> 放在哪会影响 DOM 插入逻辑
<template> 必须放在合法的父容器中，且不能嵌套在语义受限标签内——比如不能放在 <table> 内部，也不能直接塞进 <tbody>；浏览器会自动将其“拎出来”，导致后续 querySelector 失效或插入位置错乱。
立即学习“前端免费学习笔记（深入）”；
- 推荐统一放在
<body>顶部或<head>后（用display: none不解决根本问题） - 若用于表格行渲染，
<template>应置于<table>外，克隆后插入<tbody>，而非尝试往<tr>里 append - 在 Shadow DOM 场景下，
<template>需先 attach 到 shadowRoot，再克隆，否则content可能为空
配置化工程中如何让 <template> 支持动态字段映射
纯 HTML 模板无法自动识别字段名，所有数据填充都得靠 JS 显式绑定。配置化工程常通过约定字段名与 DOM 结构关系来减少硬编码。
- 推荐用
data-field="user.name"属性标记目标节点，再递归解析路径取值：obj[user][name] - 避免用 class 名做映射（如
class="user-name"），易与样式类冲突，且无语义保障 - 若字段含数组，需额外支持
data-repeat+data-item机制，类似早期 Handlebars 的{{#each}}，但得手写循环克隆逻辑 - 注意 XSS：所有文本内容用
textContent，HTML 片段才用innerHTML，且必须经DOMPurify.sanitize()过滤
SSR 场景下 <template> 与 hydration 的边界问题
服务端已输出完整 HTML，客户端又用 <template> 动态插入新内容，这两块 DOM 的 hydration 是割裂的：服务端吐出的部分能恢复 React/Vue 状态，但 <template> 克隆出来的部分不会自动绑定事件、不恢复响应式依赖、甚至 ID 冲突会让 querySelector 找错元素。
- 不要混用 SSR 渲染区和
<template>动态插入区——要么全交由框架管理，要么全走原生 JS 实例化 - 若必须混合，需手动调用
app.mount()或createRoot().hydrate()到新插入的根节点，且确保该节点未被 SSR 包裹 - 非首屏内容建议用
<template>+IntersectionObserver按需加载，但 hydration 边界要提前划清，不能指望框架自动接管
真正容易被忽略的是：<template> 的“静态性”既是优势也是枷锁——它不参与任何运行时逻辑，所以你得自己补全数据流、事件绑定、销毁清理，而这些恰恰是框架帮你屏蔽掉的复杂度。
