template.content.clonenode(true) 是唯一安全复用模板的方式，因 template.content 是 documentfragment，只能有一个父节点；浅克隆或直接 append 会导致后续渲染静默失败、数据错乱、光标丢失等问题。
template.content.cloneNode(true) 是唯一能安全复用的克隆方式
直接 appendChild(template.content) 看似省事，但第二次调用时 template.content 就为空了——因为 DocumentFragment 只能有一个父节点，这是浏览器规范行为，不是 bug。必须用 cloneNode(true) 深克隆，否则后续所有渲染都会静默失败。
常见错误现象：document.querySelector('template').innerHTML 返回空字符串；循环里反复用同一个克隆体，结果所有列表项显示相同数据；克隆后修改 input 值，但光标丢失、选中状态归零——这些全因用了浅克隆或没克隆。
-
cloneNode(true)复制全部子节点、属性、文本和表单值，保留可编辑状态 -
cloneNode(false)只克隆顶层元素，子节点全丢，完全不可用 - 跨 iframe 场景下更推荐
document.importNode(template.content, true)，兼容性略好
填值必须绕过 innerHTML，优先用 textContent 和 value
在克隆后的节点上用 innerHTML 填充用户数据，等于主动引入 XSS 风险，还会清空已绑定的事件监听器（比如模板里写好的 onclick 或手动加的 addEventListener）。
正确做法是定位到具体元素再赋值：
- 纯文本内容 →
el.querySelector('.title').textContent = data.title - 表单控件 →
el.querySelector('input').value = data.inputValue（不是textContent） - 需要渲染富文本？先对输入做 HTML 转义（如
text.replace(/&/g, '&')），再塞进innerHTML
模板中含 <script></script> 或 <style></style>？克隆后它们依然不执行、不生效——别指望“活”过来。
批量插入必须走 DocumentFragment 中转
循环里每轮都 container.appendChild(cloned)，浏览器就得反复触发重排重绘。100 条数据就可能卡顿，500 条基本卡死。这不是理论瓶颈，是真实 DOM 操作代价。
必须用 DocumentFragment 作中转容器：
const frag = document.createDocumentFragment()- 循环体内：克隆 → 填值 →
frag.appendChild(cloned) - 循环结束后，只调一次
container.appendChild(frag)
frag 是轻量中间对象，不在主 DOM 树中，querySelector 查不到它，也不触发任何样式计算或布局，性能恒定。
大规模列表滚动前得认清临界点
即使用了 <template></template> + cloneNode(true) + DocumentFragment，一次性渲染 10000 条仍会卡顿——这不是模板写法问题，而是 DOM 节点总量和布局计算本身的压力已达浏览器极限。
此时模板优化已无意义，该切虚拟滚动了。真正容易被忽略的是：ID 冲突和焦点丢失。
- 克隆后所有
id="item-1"会重复，破坏label[for]和getElementById行为，必须重写：如clone.querySelectorAll('[id]').forEach(el => el.id += '-'+Math.random().toString(36).substr(2, 9)) - 滚动中频繁挂载/卸载，
input光标会丢失，需在connectedCallback中恢复焦点逻辑，不能依赖自动继承
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
