template 标签不渲染、不执行、不绑定，仅作离线仓库；必须用 template.content.cloneNode(true) 获取可操作内容，填值优先用 textContent/value，批量插入需用 DocumentFragment 优化性能。
template 标签本身不渲染、不执行、不绑定，它只是个“离线仓库”——想用它做列表渲染，必须靠 JS 手动克隆、填值、插入。直接写 for 或插值语法（如 {{name}}）完全无效，浏览器会原样忽略。
为什么 template.content.cloneNode(true) 是唯一可靠入口
很多人卡在第一步：用 document.querySelector('template').innerHTML 拿不到内容，返回空字符串。这是因为 template 的真实内容被包裹在 DocumentFragment 里，只能通过 content 属性访问。
-
template.innerHTML始终为空，永远别用 -
template.textContent返回所有文本（含换行缩进），但无法操作结构 - 必须走
template.content.cloneNode(true)，否则后续所有节点操作都失效 - 不加
true参数是浅克隆，子元素事件监听器、表单状态、input 光标位置等全丢
填值时别碰 innerHTML，优先用 textContent 和 value
用 innerHTML 拼接字符串填值，等于主动引入 XSS 风险，还会意外销毁已绑定的事件监听器（比如模板里原本有 button，克隆后 onclick 就没了）。
- 纯文本内容：用
el.querySelector('.title').textContent = data.title - 表单控件：
el.querySelector('input').value = data.value，不是textContent - 需要保留 HTML 结构？先对用户输入做转义（如
text.replace(/&/g, '&')），再塞进innerHTML - 模板中含
<script></script>或<style></style>？cloneNode(true)不会执行脚本，也不会重复加载样式，别指望它“活”起来
批量插入必须用 DocumentFragment，否则性能崩得快
循环里每轮都 container.appendChild(cloned)，等于让浏览器反复重排重绘。100 条数据可能就明显卡顿；500 条基本卡死。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 先
const frag = document.createDocumentFragment() - 循环体内：克隆 → 填值 →
frag.appendChild(cloned) - 循环结束后，只调一次
container.appendChild(frag) -
frag是轻量中间容器，不能被querySelector查到，也不在 DOM 树中，放心用
data-属性能留，slot 不生效，别混用 Web Components 逻辑
想存 ID 或索引？data-id 可以保留在克隆节点上，但不会自动变成 JS 对象属性；想用 slot 分发内容？原生 template 不激活 slot 机制——它没挂载到 Shadow DOM，slot="xxx" 根本不解析。
- 存元信息：用
cloned.querySelector('li').dataset.id = item.id - 避免
cloned.querySelector('[slot="title"]')这类写法，永远查不到目标 - 如果真需要 slot 行为，得配合
customElements.define()+attachShadow()，那已是 Web Components 范畴，和纯 template 渲染无关
最容易被忽略的是：每次克隆都得是全新副本。共用一个节点引用、漏掉 cloneNode(true)、或在循环外提前取了 content，都会导致只显示最后一项，或者 DOM 状态错乱。这不是 bug，是 template 的设计使然——它不维护响应式，只提供干净的原始结构。
