clonenode(true) 不保留表单运行时状态（如 select 选中项、checkbox 勾选、textarea 值），因其仅复制初始 html 属性而非 dom 状态；正确做法是用 document.importnode(template.content, true) 深拷贝并保留可序列化状态，且需确保 为顶层元素、克隆后重设 id 并手动绑定事件。
为什么克隆后表单状态全丢了
直接用 cloneNode(true) 克隆 <template></template> 内容时，<select></select> 选中项、<input type="checkbox"> 勾选状态、<textarea></textarea> 光标位置这些 DOM 状态不会被保留——浏览器会重置为初始值。这不是 bug，是规范行为。
正确做法是改用 document.importNode(template.content, true)。它专为 <template></template> 设计，能深拷贝并保留所有可序列化的状态（如 value、checked、selectedOptions）。
- 必须在
DOMContentLoaded后执行，否则template.content可能为空 DocumentFragment -
importNode不执行模板内的<script></script>，需手动appendChild后触发或eval() - 克隆后不能靠
innerHTML覆盖整个子树，否则丢失已绑定的事件监听器
克隆后的 ID 冲突和事件绑定失效
模板里写 id="email"，克隆多次就出现多个同名 ID，document.getElementById('email') 行为不可预测，<label for="email"></label> 也会失效——点击 label 不聚焦对应 input。
填充数据必须用语义化 API：textContent 写文本（自动防 XSS），setAttribute('src', url) 改属性，el.value = data.phone 显式赋值表单控件，而不是依赖 HTML 中的 value="xxx"。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 克隆后务必重设 ID：比如
el.id = 'email-' + Date.now()，同时同步更新label[for] - 克隆节点默认不带事件监听器，需插入 DOM 后手动绑定，或封装进工厂函数统一处理
- 推荐用
dataset存上下文标识（如card.dataset.userId = '123'），比隐藏字段更轻量、更语义化
标签位置错误导致 content 为空
<template></template> 必须作为顶层元素存在，不能嵌套在 <div>、<code><section></section> 或其他组件内部。一旦被包裹，Safari 15.4 之前版本会丢弃其 content，导致 template.content 返回空 DocumentFragment。
典型错误写法：<div class="page"><template id="header">...</template></div>。这种结构在部分浏览器中根本取不到内容，克隆操作静默失败。
- 正确位置：放在
直接子级，或末尾（但不要包在其他标签里） - 验证方式：打开 DevTools → Elements → 展开
<template></template>标签，确认其下有子节点；或运行console.log(template.content.children.length)是否大于 0 - 构建阶段预处理（如 posthtml-include）可绕过此限制，但运行时 JS 方案必须守这个规则
用 innerHTML 替换占位符等于埋雷
试图用字符串替换（如 innerHTML.replace('{{title}}', 'Hello')）填充模板，既不安全也不可靠：容易漏掉嵌套标签、破坏自闭合元素（<img>、<input>）、绕过 XSS 防护，且无法处理动态属性或条件逻辑。
<template></template> 的设计初衷不是字符串容器，而是结构锚点。所有填充都应基于 DOM API 操作，而非字符串拼接。
- 模板内禁止硬编码内容，改用
class="js-title"或data-bind="title"作锚点 - 统一用
class="js-xxx"标记注入点，比data-更轻量，CSS 也能复用 - 需要条件渲染（如登录态显示用户名）时，模板里留空节点，JS 根据数据决定
textContent = ''还是appendChild(...)
importNode 和 cloneNode(true) 的语义差异——前者是规范保障的状态克隆，后者只是结构复制。选错就等于默认放弃表单交互一致性。
