template.content.clonenode(true) 是唯一可靠克隆方式：必须取 content→clonenode(true)→插入，true不可省略，否则仅复制空 fragment；需处理 id/name 冲突、事件重绑、script/style 不执行等问题，并注意 safari 15.4 前兼容性。
template.content.cloneNode(true) 是唯一可靠克隆方式
直接对 <template></template> 元素调用 appendChild()、innerHTML 或遍历 children 都会失败或返回空——因为它的内容被浏览器存为离线的 DocumentFragment，只暴露在 content 属性里。template.children 恒为空；template.innerHTML 在多数浏览器中返回空字符串，不是 bug，是规范行为。
必须走三步：取 template.content → 调用 .cloneNode(true) → 插入目标容器。其中 true 不可省略，否则只复制空 fragment 自身，内部节点全丢。
- 错误写法：
template.appendChild(node)（静默失败） - 错误写法：
template.innerHTML = '...'（不生效，且破坏 DOM 状态） - 错误写法：
template.children[0]（永远是undefined）
克隆后必须处理 ID 冲突和表单 name 属性
克隆会原样复制所有属性，包括 id 和 name。多个相同 id 会导致 document.getElementById() 只返回第一个，label[for] 失效，表单校验异常（如 Safari 下 checkValidity() 返回 false）；同名 radio 或 select 会意外互斥。
每次克隆后需手动重设：
el.id = `item-${counter++}`-
el.name = `field-${counter}`（尤其对<input type="radio">） - 关联的
label[for]必须同步更新
不要依赖内联 onclick，它会被复制但不可维护；事件监听器需克隆后重新绑定，或改用事件委托。
template 中的 script 和 style 默认不执行也不生效
<template></template> 是惰性容器：内部 <script></script> 不执行、<style></style> 不注入、图片不加载。克隆后这些节点仍处于“休眠”状态。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
若需运行脚本：
- 仅限内联脚本：克隆后手动提取
script节点，插入document.head或document.body - 避免在模板里放
<script></script>，逻辑应抽离到主 JS 中统一管理 -
<style></style>同理，建议用全局 CSS 或<style scoped></style>（注意兼容性）
含 <slot></slot> 的模板克隆后不会自动分发内容，slot 机制在克隆时失效，不适用于 Web Components 场景。
高频复用时要缓存已克隆的干净节点
如果一个模板要渲染 50+ 条列表项，每次都调用 template.content.cloneNode(true) 会重复解析结构，性能不如缓存一次“干净实例”再克隆它。
正确缓存方式：
- ✅
const cached = template.content.cloneNode(true)（缓存的是可插入的 DOM 片段） - ✅ 后续用
cached.cloneNode(true)快速生成新实例 - ❌
const cached = template.content（只读 fragment，不能直接插入）
批量插入务必用 document.createDocumentFragment() 中转，避免循环中反复操作真实 DOM 导致重排卡顿。克隆后的节点已脱离文档，可自由修改 dataset、textContent、className 等，再统一插入。
容易被忽略的点：SSR 渲染后 template.content 可能为空，客户端需先判空；旧版 Safari（15.4 前）对 cloneNode(true) 有 bug，必要时降级用 document.importNode(template.content, true)，但仅限单页应用中的非常规兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
