template.content.clonenode(true)是唯一可靠克隆方式，直接appendchild(template.content)仅生效一次，因其为只读documentfragment，移走后为空；克隆后需手动处理id重复、事件绑定、表单状态及样式隔离。
template.content.cloneNode(true) 是唯一可靠克隆方式
直接 appendChild(template) 会把模板内容“搬走”，第二次调用就为空；必须用 template.content.cloneNode(true) 深克隆，否则列表渲染只生效一次。这个操作返回的是 DocumentFragment，不是普通节点，不能直接设 innerHTML 或当字符串处理。
常见错误是写成 template.innerHTML —— 那只是字符串，丢失了 DOM 结构、事件绑定和表单状态；而 template.content 是真实可操作的片段。
- 必须等
DOMContentLoaded触发后再取template.content，否则可能为空 - 克隆后若含
<input>或<select></select>，其当前值（如用户已输入的文字）不会被保留——这是浏览器行为，不是 bug - 想保留表单状态，得改用
document.importNode(template.content, true)，但注意它不执行内联脚本
data-* 属性只是静态标记，不自动绑定数据
template 里写 data-title="默认标题" 不会触发任何逻辑，也不会随 JS 数据更新。它只是个固定字符串，和 div[data-id="1"] 一样，仅用于后续 JS 查找锚点。
真正填充数据得靠手动遍历：用 querySelector('[data-bind="title"]') 找到目标元素，再设 textContent 或 value。别用 innerHTML 拼接用户输入，有 XSS 风险。
- 推荐统一用
class="js-xxx"做注入点，比data-更轻量，CSS 也能复用 - 避免在模板里写
id="header"—— 克隆多次后 ID 重复，document.getElementById()只返回第一个 - 需要动态 ID 时，用递增索引或
crypto.randomUUID().slice(0, 6)生成，别用Math.random()
跨页面复用 template 需额外加载逻辑
template 标签只能在当前 HTML 文档内定义，无法像 SSI 或构建工具那样跨文件引用。想让多个页面共用同一套模板，得靠外部加载 + 动态插入。
典型做法是把模板存为独立 templates.html，用 fetch('templates.html') 加载，再用 DOMParser 解析出 template 元素。但要注意：相对路径（如图片、CSS）在片段中会被解析为相对于当前页面 URL，不是模板文件所在路径。
- 失败时要有降级方案，比如内联一个极简版模板，避免白屏
-
fetch必须加async属性，否则阻塞页面渲染 - 加载后需手动检查
template#user-card是否存在，再执行克隆逻辑
克隆后必须重置表单控件的 id/name 和 label[for]
模板里写 <input id="email" name="email"> 很常见，但克隆 5 次就会产生 5 个相同 id —— 违反 HTML 规范，导致 label[for="email"] 全部指向第一个输入框，焦点和可访问性全乱。
每次克隆后，要遍历所有表单控件，重写 id、name 和关联的 label[for]。这不是可选优化，而是必要步骤。
- 对
<input type="checkbox">，还要同步更新id和对应label的for属性 - 不要用
innerHTML替换整个子树——会丢掉用户当前输入值、select选中项、已绑定事件 - 克隆后立即调用
querySelector注入数据，而不是先拼字符串再innerHTML
真正难的不是“怎么塞进去”，而是克隆后是否还满足语义化要求：有没有重复 ID、h1 是否唯一、ARIA 标签是否仍有效、焦点流是否断裂——这些细节不会报错，但会让屏幕阅读器卡住，或让键盘用户无法跳转。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
