HTML template 标签定义可重用内容片段

template 是惰性 DOM 片段仓库，内容解析但不渲染、不执行脚本、不加载资源；必须通过 cloneNode(true) 克隆 content 后插入，且需重设表单 ID/name/for 以确保功能正常。

先问大家一个问题：template 标签到底是什么？它不是占位符，也绝不是用来“藏 HTML 字符串”的容器——它本质上是一个原生的、惰性的 DOM 片段仓库。内容会被解析，但不会渲染、不会执行脚本、也不会加载图片。直接写在 HTML 里不会生效，必须通过 Ja vaScript 克隆后才能插入页面。

template.content 是唯一合法入口，innerHTML 永远为空

你永远不会看到 template.innerHTML 里有内容，因为它恒等于 ""；同样，template.children 也永远是空的 NodeList。浏览器把真实内容封装在一个只读的 DocumentFragment 中，藏在 content 属性里。

• ✅ 正确操作：const frag = document.querySelector('#item').content;
• ❌ 别踩坑：template.innerHTML.replace(...)、template.firstElementChild、Array.from(template.childNodes) 这些都不行
• ⚠️ 需要警惕：frag 是“剪切语义”——第一次 appendChild(frag) 后，frag 就空了。第二次再 append 会静默失败

必须用 cloneNode(true)，别相信 importNode 或浅克隆

cloneNode(true) 是目前最可靠、兼容性最好的深克隆方式。虽然 document.importNode(template.content, true) 语义上更准确，但在 Safari 15.4 之前，它对 fieldset 或带 required 的表单控件有 bug——checkValidity() 可能返回 false，即使输入值完全合法。

• ✅ 推荐写法：const instance = template.content.cloneNode(true);
• ❌ 避免写法：cloneNode(false) —— 这只会克隆一个空的 fragment 容器，里面没有子节点
• ⚠️ 表单场景必做：重设 id、name、for，否则多个实例中 label 点击无效，提交字段会相互覆盖
• ? 建议使用 crypto.randomUUID().slice(0, 8) 生成唯一 ID，别用 Math.random()

template 不能随便放，嵌套位置有硬限制

template 必须直接位于 或 内，否则浏览器会静默移除或错位解析。尤其注意，它不能出现在语义受限的父容器中：

• ❌ 错误位置： →