template标签仅为惰性dom容器，非模板引擎；必须用clonenode(true)深克隆content，且每次克隆后需重置id、表单值并手动绑定事件。
template 标签在单页应用（SPA）中不构成模板引擎，它只是个惰性 DOM 容器，所有变量替换、条件渲染、事件绑定都得手动写 JS 实现。想靠它替代 Handlebars、Vue 或 JSX？不行。
template.content.cloneNode(true) 是唯一合法入口
常见错误现象：template.innerHTML 返回空字符串、template.children 是空 NodeList、直接 appendChild(template) 什么也不显示。
-
template.content是只读的DocumentFragment，不是普通元素节点 - 必须用
.cloneNode(true)深克隆，否则第二次appendChild会静默失败（fragment 被移走，不是复制） -
.cloneNode(false)只克隆空容器，没子节点，基本等于没克隆 - 不要缓存
template.content变量反复使用——每次都要重新调用.content.cloneNode(true)
克隆后必须重置表单、ID 和事件
SPA 中常批量渲染卡片、表单项或模态框，若跳过这步，立刻出问题：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
id重复：导致document.getElementById总是返回第一个，label[for]点击失焦 - 表单控件值未更新：
<input value="default">克隆后还是初始值，不会自动同步数据 - 内联事件（如
onclick）完全无效；addEventListener必须在克隆后手动绑定 -
<img src>、<script></script>、<video autoplay></video>在克隆前不加载、不执行，克隆插入后才激活
建议操作：
- 用
crypto.randomUUID().slice(0, 8)生成唯一 ID，而非Math.random() - 同步更新
label[for]和对应input[id] - 表单字段优先设
dataset.context存上下文，比塞隐藏字段更可靠
批量渲染必须用 DocumentFragment 中转
循环里直接 container.appendChild(clone) 会触发多次重排，几十个节点就明显卡顿。
- 先创建中转碎片：
const frag = document.createDocumentFragment() - 循环中修改每个
clone，然后frag.appendChild(clone) - 最后一次性
container.appendChild(frag)
注意：template 必须放在 或 的直接子级，嵌套在 <div>、<code><table> 或 <code><script></script> 里会被浏览器自动挪走甚至丢弃。
最常被忽略的不是语法，而是克隆后对 id 和 name 属性的处理——它们在 SPA 多实例场景下极易引发表单提交错乱、校验失效、焦点错位，且问题往往延迟暴露。
