必须用template.content.cloneNode(true)才能获取可操作DOM节点，因为template内容被封装为只读DocumentFragment，innerHTML恒为空、textContent无法操作结构，且content为单次消耗品，浅克隆或复用引用均会导致失败。
必须用 template.content.cloneNode(true) 才能拿到可操作的 DOM 节点，否则所有后续操作都无效——这是最常卡住人的第一步。
为什么直接读 innerHTML 或 textContent 拿不到模板内容
浏览器把 <template></template> 内部内容封装成一个只读的 DocumentFragment，它不参与 DOM 树，也不暴露给字符串接口：
-
template.innerHTML永远返回空字符串，不是 bug，是规范行为 -
template.textContent会返回所有文本（含换行缩进），但无法定位或修改结构节点 - 唯一合法入口只有
template.content，它是DocumentFragment类型，不能直接插入、不能直接绑定事件、不能直接改属性
每次渲染都要调用 cloneNode(true)，不能复用 content 引用
template.content 是“单次消耗品”：一旦被 appendChild() 移入真实 DOM，它就从 fragment 中被抽走，再取就是空的。常见错误是缓存它、循环里反复用：
- ❌ 错误：
const content = tmpl.content; list.forEach(item => parent.appendChild(content.cloneNode(true)))—— 第二次起content已为空 - ✅ 正确：每次循环都重新取
tmpl.content.cloneNode(true) - 必须传
true：cloneNode(false)只克隆<template></template>自身，不包含内部结构 - 表单控件（如
<input>、<select></select>）的初始值、焦点状态、事件监听器，只有深克隆才能保留
填值优先用 textContent 和 value，别碰 innerHTML
用 innerHTML 填值等于主动引入 XSS 风险，还会销毁已存在的事件监听器和节点引用：
立即学习“前端免费学习笔记（深入）”；
- 纯文本内容：用
el.querySelector('.title').textContent = data.title - 表单控件：用
el.querySelector('input').value = data.inputValue，不是textContent - 需要渲染 HTML 片段？先对用户输入做转义（如
text.replace(/&/g, '&').replace(/, '），再塞进 <code>innerHTML - 模板里有
<script></script>或<style></style>？cloneNode(true)不会执行脚本、不会加载样式——这是惰性设计的一部分，别指望它“自动活过来”
批量插入必须用 DocumentFragment，否则性能崩得快
100 条数据循环里每轮都 container.appendChild(cloned)，等于让浏览器反复重排重绘，滚动卡顿、内存飙升是必然结果：
- ✅ 正确流程：
const frag = document.createDocumentFragment()→ 循环内frag.appendChild(cloned)→ 循环结束后container.appendChild(frag) -
frag是轻量中间容器，不在主 DOM 树中，querySelector查不到它，放心用 - 表格场景要显式用
<tbody> 包裹动态行，避免浏览器自动补全导致结构错乱 <li> <code>data-属性能保留在克隆节点上，比如cloned.querySelector('tr').dataset.id = item.id；但<slot></slot>在普通 DOM 里完全不生效，别混用 Web Components 逻辑
真正容易被忽略的是：template 的“惰性”不是为了省几行代码，而是为了隔离副作用——脚本不执行、图片不加载、样式不应用。一旦你开始手动补事件、手动触发渲染逻辑，就得自己承担状态同步和生命周期管理的复杂度。别把它当 Vue 模板用，它就是一个干净、安全、可复用的 DOM 片段仓库。
