cloneNode(true)是唯一能完整克隆template.content的方式，否则会因DocumentFragment单父节点特性导致内容被静默移动；必须设true才能复制input值、checkbox状态等真实DOM状态，且需重设id/name避免冲突。
template.content.cloneNode(true) 是唯一能用的克隆方式
直接 appendChild(template.content) 看似简单，但第一次插入后 template.content 就空了，第二次再调用就什么也不显示——浏览器没报错，只是静默“搬走”内容。这是因为 template.content 是只读的 DocumentFragment，它只能有一个父节点，移动即转移。
必须走三步：取 template.content → 调用 .cloneNode(true) → 插入目标容器。漏掉 true（写成 .cloneNode(false)）会得到一个空壳，里面没有任何子节点、文本或表单值。
-
cloneNode(true)才能复制 input 的当前value、checkbox 的checked状态、textarea 光标位置等真实 DOM 状态 -
cloneNode(false)只复制DocumentFragment本身，内部结构全丢，querySelector必然返回null - 克隆后原
template不受影响，可反复使用
克隆后 ID 和 name 属性必须重设
模板里写 <input id="title" name="title">，克隆五次就会产生五个相同 id。这会导致 document.getElementById('title') 永远只返回第一个，label[for="title"] 点击失效，表单校验（比如 checkValidity()）在 Safari 下可能直接返回 false。
- 每次克隆后手动重设：
el.id = `title-${counter++}`、el.name = `title-${counter}` - 关联的
label[for]必须同步更新，否则点击 label 不聚焦对应 input -
<input type="radio">要特别注意：同名name会让它们互斥，克隆时得确保每组 radio 的name唯一或按需分组
template 里的 script 和 style 不会自动生效
<template> 是惰性容器，内部的 <script> 不执行、<style> 不注入、图片不加载。克隆后这些节点还在，但处于“休眠”状态。
立即学习“前端免费学习笔记（深入）”；
- 内联
<script>：克隆后需手动提取内容，创建新<script>节点并插入document.head或document.body（不推荐，逻辑应抽离到主 JS） -
<style>：优先用全局 CSS，或<style scoped>（注意兼容性） -
<slot>在普通 template 中完全不激活，克隆后cloned.querySelector('[slot="title"]')能拿到元素，但改它的textContent不会“投射”到任何地方
高频渲染时缓存克隆结果能显著提速
如果要渲染 50+ 条数据，每次都走 template.content.cloneNode(true)，等于重复解析 HTML 结构。不如缓存一次“干净实例”，后续直接克隆它。
- ✅ 正确缓存：
const cached = template.content.cloneNode(true)（缓存的是可插入的 DOM 片段） - ✅ 后续生成：
cached.cloneNode(true)—— 比反复访问template.content快得多 - ❌ 错误缓存：
const cached = template.content—— 这只是只读 fragment，不能直接插入 - 批量插入务必用
DocumentFragment中转，避免循环中反复操作真实 DOM 导致重排重绘卡顿
克隆后填值要用 textContent 和 value，别碰 innerHTML；querySelector 定位要靠 class 或 data-* 属性，别依赖顺序；同一个克隆节点不能插入多次，否则所有实例共享同一份 DOM 引用。
