template.content.cloneNode(true) 是唯一能用的克隆入口，因模板内容存于只读 DocumentFragment 中；漏掉 true 仅得空壳，不 clone 则第二次 append 静默失败；克隆后须重设 id/name 并显式绑定事件，script/style 不执行需手动处理，高频渲染应缓存 cleanInstance 并用 DocumentFragment 批量插入。
template.content.cloneNode(true) 是唯一能用的克隆入口
直接读 template.innerHTML 或遍历 template.children 拿不到内容——前者永远返回空字符串，后者恒为空 NodeList。这是规范行为，不是 bug。浏览器把模板内容存在只读的 DocumentFragment 里，只能通过 content 属性访问，且必须立刻深克隆：template.content.cloneNode(true)。漏掉 true 参数就只复制一个空壳，内部节点全丢；不 clone 就直接 appendChild，第二次操作必然静默失败（因为 content 是“搬走即空”的引用）。
克隆后必须重设 id、name 和事件绑定
原样克隆会复制所有属性，导致实际运行时出问题：
-
id冲突：多个相同id让document.getElementById()只返回第一个，label[for]失效 -
name互斥：<input type="radio" name="gender">克隆多次后变成一组同名单选框，用户只能选一个 - 内联事件失效：模板里的
onclick="handler()"被复制但不会自动绑定，也不可维护
正确做法是克隆后主动重设：el.id = `btn-${counter++}`、el.name = `gender-${index}`，再用 el.addEventListener('click', handler) 显式绑定。
script 和 style 在克隆后仍处于“休眠”状态
<template> 是惰性容器，里面的 <script> 不执行、<style> 不注入、图片不加载。克隆出来的节点也继承这个状态：
立即学习“前端免费学习笔记（深入）”；
- 内联
<script>：需手动提取、创建新<script>节点，再插入document.head或document.body -
<style>：建议抽到全局 CSS，或用<style scoped>（注意兼容性） -
<slot>：在普通 DOM 中完全无效，只对 Shadow DOM 生效；克隆后写cloned.querySelector('[slot="title"]')不会命中任何节点
高频渲染时缓存干净实例比反复克隆更快
渲染 50+ 条数据时，每次都调用 template.content.cloneNode(true) 会重复解析 HTML 结构，性能不如缓存一次“干净副本”：
- ✅ 正确缓存：
const cleanInstance = template.content.cloneNode(true)（可直接插入的 DOM 片段） - ✅ 后续生成：
cleanInstance.cloneNode(true)（快得多） - ❌ 错误缓存：
const cached = template.content（只读 fragment，不能直接插入） - 批量插入必须用
document.createDocumentFragment()中转，否则每轮appendChild都触发重排，卡顿明显
注意：缓存的干净实例若含 <input value="default">，克隆后仍保留初始值，填充时必须显式设置 input.value，不能只改 textContent。
