template.content.cloneNode(true) 是唯一可靠起点，因 template.innerHTML 返回空字符串、children 为空，其内容仅存于只读 DocumentFragment 的 content 属性中；true 参数不可省略，否则克隆为空片段。
template.content.cloneNode(true) 是唯一可靠起点
直接操作 template.innerHTML 永远拿不到内容——它返回空字符串；template.children 也是空的。浏览器把内部结构存为只读的 DocumentFragment，藏在 content 属性里。想复用，必须走这一步：template.content.cloneNode(true)。
常见错误现象：
• 用 appendChild(template.content) 第一次成功，第二次插入空白
• 误以为 cloneNode(false) 能用，结果只复制顶层 fragment，子节点全丢
• 把模板当普通 DOM 元素遍历，发现查不到任何子元素
-
true参数不可省略，否则克隆的是空文档片段 - 克隆后得到的是干净 DOM 实例，没 ID 冲突、没状态残留，适合多次实例化
- 克隆不带事件监听器，后续需手动绑定
填充数据时别碰 innerHTML，优先用 textContent 和 setAttribute
很多人习惯写 el.innerHTML = '<h3>' + user.name + '</h3>'，这既破坏原有结构（比如嵌套的 <input type="date"> 会被转义），又引入 XSS 风险。
正确做法是克隆后，用语义化 API 安全更新：
立即学习“前端免费学习笔记（深入）”；
- 纯文本内容一律用
el.textContent = value，自动转义，防 XSS - 属性值用
el.setAttribute('src', url)，比直接赋el.src = url更兼容老浏览器（触发资源加载） -
<input>、<select>等表单控件，克隆后必须重置id和name，否则多个实例提交时字段覆盖、label[for]错位、form.checkValidity()返回异常结果 - 建议用
dataset存上下文信息，比如card.dataset.userId = '123'，比塞隐藏字段更可控、更语义化
fetch + template 是静态页最现实的复用路径
把公共片段（如 nav.html、footer.html）抽成独立文件，用 fetch() 加载后注入，是纯前端、无构建、现代浏览器兼容的底线方案。
使用场景：
- 没有服务端渲染能力，又不想硬编码重复结构
- 需要动态决定加载哪个片段（比如按用户角色显示不同导航）
- 配合缓存策略（
cache: 'force-cache'）可避免重复请求
注意点：
-
fetch('nav.html').then(r => r.text())后，不能直接innerHTML = data—— 这会绕过<template>的语义和安全机制 - 应将返回的 HTML 字符串解析为 DOM：
const parser = new DOMParser(); const doc = parser.parseFromString(data, 'text/html'); const template = doc.querySelector('template');，再走content.cloneNode(true)流程
含 <script> 或 <style> 的模板要特别处理
<template> 里的 <script> 和 <style> 不会自动执行或生效，但会被插入到 DOM 中：
-
<style>插入后全局生效，可能污染其他组件样式 —— 建议改用 CSS 类名 + 外部样式表控制 -
<script>不会执行，也不推荐手动eval()或创建新<script>标签 —— 容易引发执行顺序、作用域、重复加载问题 - 若真需动态行为，应在克隆后统一由主逻辑绑定事件或初始化，而非依赖模板内联脚本
真正容易被忽略的不是怎么写模板，而是克隆后是否清除了旧状态、是否重置了表单标识、是否隔离了样式影响 —— 这些细节决定复用是省事还是埋雷。
