template.content 是唯一能取到模板内容的只读属性，返回 DocumentFragment；必须用 cloneNode(true) 或 importNode 克隆后才能复用，且需手动绑定事件、设置表单状态。
template.content 是唯一能取到模板内容的属性
直接访问 template.innerHTML 会得到空字符串，template.children 也是空 NodeList——因为浏览器根本不会把模板内容解析为真实子节点。真正承载结构的是只读的 content 属性，它返回一个 DocumentFragment。
常见错误是写成：template.querySelector('.name')，这永远查不到；正确写法是：template.content.querySelector('.name')。
- 必须用
.content才能访问内部 DOM 节点 -
DocumentFragment不是普通元素，不能直接appendChild到页面，必须先克隆 - 克隆后才能自由修改文本、属性、事件绑定等
克隆必须用 cloneNode(true) 或 importNode
直接把 template.content append 到页面，只会移动一次——第二次再 append 就什么都没有了，因为 DocumentFragment 是“单次使用”的。必须显式克隆才能复用。
两种等效写法：template.content.cloneNode(true) 或 document.importNode(template.content, true)。后者更语义明确，推荐在跨文档场景（如 iframe）中使用。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
cloneNode(true)深度克隆所有子节点，包括文本、元素、注释 - 不加
true（即浅克隆）只克隆<template>自身，没意义 - 克隆后的节点是全新实例，样式、事件、表单值都需重新设置
模板内脚本和内联事件完全不执行
<template> 中的 <script> 标签不会解析，onclick="doSomething()" 也不会绑定——这是设计使然，不是 bug。所以别指望靠内联 JS 实现交互逻辑。
典型翻车现场：模板里写了 <button onclick="alert(1)">点我</button>，克隆插入后点击毫无反应。
- 所有交互必须在克隆后手动添加：
clone.querySelector('button').addEventListener(...) - 或用事件委托，在父容器监听，用
event.target.matches('.delete-btn')判断来源 - 模板内
<style>会生效，但作用域是全局的；如需封装，得配合 Shadow DOM
表单控件克隆后 value 和 checked 状态不对
如果模板含 <input type="text"> 或 <input type="checkbox">，克隆出来的是初始 HTML 值（比如 value="默认"），不是用户当前输入的内容。这是因为克隆的是 DOM 结构，不是运行时状态。
例如：用户在某个已渲染的表单项里输入了 “张三”，你克隆同一模板生成新项，新项的 input 还是空的，不是 “张三”。
- 克隆后需显式设置：
clone.querySelector('input').value = '新值' - 对于 checkbox/radio，要同时设
checked属性和defaultChecked属性才可靠 - 不要依赖
innerHTML替代方案，它易 XSS 且无法安全操作表单状态
最常被忽略的一点：模板内容虽“不可见”，但它仍参与 HTML 解析校验——非法嵌套、缺失闭合标签、在不允许的位置使用都会报错或被浏览器静默修正。写的时候就得当它是真实 DOM 来对待。
