template.content.clonenode(true) 是唯一能稳定取到可操作节点的方式，因 template 内容被封装在只读 documentfragment 中，直接读 innerhtml、children 或 textcontent 均不可用；且 clonenode(true) 才保留完整结构、表单值与事件状态。
template.content.cloneNode(true) 是唯一能稳定取到可操作节点的方式
直接读 template.innerHTML 永远返回空字符串，template.children 是空列表，template.textContent 只有换行和纯文本——这不是 bug，是浏览器规范强制隔离了 template 的内容域。它被封装在只读的 DocumentFragment 里，只能通过 content 属性访问，且必须立刻克隆。
常见静默失败现象：
- 第二次渲染空白，控制台无报错
- 所有列表项显示相同数据
- 输入框光标丢失、选中状态归零
原因就一个：template.content 是“移动语义”——appendChild(template.content) 会把内容搬走，再调就空了；cloneNode(false) 只克隆顶层元素，子节点、表单值、事件监听器全丢；只有 cloneNode(true) 才复制完整结构和当前状态。
填值必须用 textContent/value，别碰 innerHTML
用 innerHTML 填用户数据等于主动引入 XSS 风险，还会清空已绑定的事件监听器（比如模板里写好的 onclick 或 JS 手动加的 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 条基本卡死。
- 先
const frag = document.createDocumentFragment() - 循环体内：克隆 → 填值 →
frag.appendChild(cloned) - 循环结束后，只调一次
container.appendChild(frag)
frag 是轻量中间容器，不能被 querySelector 查到，也不在 DOM 树中，放心用。
嵌套 template 和 slot 在原生 JS 中不自动生效
HTML5 <template></template> 不支持递归渲染，也不激活 <slot></slot>。你写个包含 <template></template> 的 <template></template>，它就真的只是静态 HTML 字符串——没解析、没作用域、没上下文传递。
-
<slot name="title"></slot>在普通 DOM 克隆后不会分发内容，cloned.querySelector('[slot="title"]')找不到目标或赋值无效 - 想实现树形结构（如嵌套评论）？必须手动写 JS 遍历数据、匹配模板、克隆、填充、再递归处理子节点
-
data-属性能保留，但不会自动映射成 JS 对象属性；存 ID/索引建议用dataset显式设置：cloned.querySelector('li').dataset.id = item.id
ID 冲突要主动处理：克隆后若存在重复 id="modal-close"，后续 document.getElementById 只取第一个——别依赖 id 查找，优先用 class 或 dataset。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
