template.content.cloneNode(true) 是唯一可靠克隆方式，需三步操作：取 content→cloneNode(true)→插入；注意 Safari 旧版兼容性、缓存已克隆节点、用 DocumentFragment 批量插入、避免 ID 冲突、不用 slot、优先用 dataset 携带元信息。
template.content.cloneNode(true) 是唯一可靠克隆方式
直接读取 template.innerHTML 总是返回空字符串，这不是 bug，而是规范行为——浏览器把内容存为离线的 DocumentFragment，只暴露在 content 属性里。试图用 innerHTML.replace() 或 textContent 提取再拼接，会破坏嵌套结构（比如 <input type="date">）、丢失表单状态、引入 XSS 风险。
必须走三步：取 template.content → 调用 .cloneNode(true) → 插入目标节点。注意 true 不可省略，否则只复制空壳（DocumentFragment 本身），内部节点全丢。
- 旧版 Safari（15.4 之前）对
cloneNode(true)有 bug，可能返回空 fragment；更稳妥用document.importNode(template.content, true) - 克隆后节点脱离原上下文，可自由修改 class、dataset、textContent，但不会自动继承父级样式作用域
- 模板内含
<script></script>或<style></style>？克隆后它们仍不执行、不生效，得手动提取并注入或提前剥离
缓存克隆结果比反复调用 cloneNode 更快
如果同一模板需高频复用（比如渲染 50+ 条列表项），每次循环都调用 template.content.cloneNode(true) 会重复解析结构。更优做法是：预先克隆一次，缓存为干净的 DOM 片段，后续用 cloneNode(true) 复制该片段。
但注意：缓存的是“已克隆的节点”，不是 template.content 本身。后者每次访问都是原始 fragment，而前者是可复用的实例。
立即学习“前端免费学习笔记（深入）”；
- 错误缓存：
const cached = template.content——content是只读 fragment，不能直接插入 DOM - 正确缓存：
const cached = template.content.cloneNode(true)，之后用cached.cloneNode(true)快速生成新实例 - 若模板含表单控件（如
<input value="default">），缓存的节点保留初始值；填充时必须显式设置el.value = data.value，否则显示的仍是默认值
批量插入必须用 DocumentFragment 避免重排
循环中对真实 DOM 反复 appendChild()，每轮都触发重排重绘，100 条数据可能明显卡顿。解决方案是用 document.createDocumentFragment() 作中转容器，所有克隆节点先塞进它，最后一次性插入。
注意 DocumentFragment 是轻量中间态，不在主 DOM 树中，querySelector 查不到它里面的节点；且插入后自动清空，不可复用。
- 别写：
for (...) { listEl.appendChild(clone); }—— 每次都重排 - 要写：
const frag = document.createDocumentFragment(); for (...) { frag.appendChild(clone); } listEl.appendChild(frag); - 克隆后的节点事件监听器不会自动继承（
addEventListener绑定的失效），推荐用事件委托，而非为每个实例单独绑定
容易被忽略的边界：ID 冲突、slot 不激活、dataset 是唯一安全元信息载体
模板里写死 id="submit-btn"？克隆 10 次就产生 10 个同名 ID，导致 document.getElementById 行为不可靠、label[for] 错位、表单验证异常。同样，<slot></slot> 在普通 template 中完全不工作——它依赖 Shadow DOM，克隆后只是普通 HTML 元素，slot="xxx" 属性毫无意义。
真正能安全携带元信息的只有 dataset：它随克隆保留，可读可写，且无命名冲突风险。
- 填充前务必重置：
clone.querySelector('button').id = `btn-${index}`或直接删掉id属性 - 不要依赖
slot做内容分发；想实现类似效果，用data-bind="title"+ 手动textContent注入 - 存原始数据 ID、类型等元信息，统一走
clone.dataset.itemId = item.id，比隐藏input或自定义属性更可控
