template.content.cloneNode(true)是唯一可靠克隆方式：必须取content→cloneNode(true)→插入，true不可省略，否则仅复制空fragment；需处理ID/name冲突、事件重绑等问题。
template.content.cloneNode(true) 是唯一可靠起点
直接操作 template.innerHTML 永远拿不到内容——它返回空字符串；template.children 也是空的。浏览器把内部结构存为只读的 DocumentFragment，藏在 content 属性里。想复用，必须走这一步：template.content.cloneNode(true)。
不 clone 直接 appendChild(template.content) 是个常见陷阱：第一次插入后，template.content 就被“搬走”了，第二次调用会插入空文档片段，页面什么也不显示，控制台也没报错，问题极难定位。
-
cloneNode(true)复制所有子节点、文本、属性，但不复制事件监听器（需手动绑定） - 克隆后得到的是干净 DOM 实例，没 ID 冲突、没状态残留，适合多次实例化
- 若模板含
<script></script>或<style></style>，它们不会执行或生效，但会被插入到 DOM 中（样式全局生效，脚本需手动 eval —— 不推荐）
填充数据时别碰 innerHTML，优先用 textContent 和 setAttribute
很多人习惯用 innerHTML 拼接用户输入，比如 el.innerHTML = '<h3>' + user.name + '</h3>'，这既破坏原有结构（比如嵌套 <input type="date"> 会被转义），又引入 XSS 风险。
正确做法是克隆后，用语义化 API 安全更新：
立即学习“前端免费学习笔记（深入）”；
- 纯文本内容一律用
el.textContent = value，自动转义，防 XSS - 属性值用
el.setAttribute('src', url)，比直接赋el.src = url更兼容老浏览器（触发资源加载） -
<input>、<select></select>等表单控件，克隆后必须重置id和name，否则多个实例提交时字段覆盖、label[for]错位、form.checkValidity()返回异常结果 - 建议用
dataset存上下文信息，比如card.dataset.userId = '123'，比塞隐藏字段更可控、更语义化
fetch + template 是静态页最现实的复用路径
把公共片段（如 nav.html、footer.html）抽成独立文件，用 fetch() 加载后注入，是纯前端、无构建、现代浏览器兼容的底线方案。比硬编码在 HTML 里更易维护，也比自定义元素轻量得多。
实操要点：
- 服务端必须允许同源请求；
python -m http.server默认禁 CORS，换用serve或live-server - 注入时机必须等
DOMContentLoaded，否则document.head或目标容器可能还不存在 - 往
插入时，优先用insertAdjacentHTML('afterbegin', html)，避免覆盖已有<meta>或<link> - 务必加
try/catch，对 404 或网络失败做降级处理（例如console.warn('Failed to load nav.html')），不能让整个导航栏消失导致页面不可用
slot 不是 include，独立使用 template 时它基本无效
<slot></slot> 是 Web Components 的内容分发机制，不是 HTML include 的替代品。它依赖 customElements.define() 注册、Shadow DOM 封装，且样式默认不穿透。
如果你只是把 <template></template> 当普通容器用，里面写 <slot name="header"></slot>，克隆后插入页面，那个 <slot></slot> 就是个普通标签，不会自动接收任何内容，也不会被替换。
- 未命名
<slot></slot>只在 Shadow DOM 中接收宿主元素的“默认内容”，纯template+cloneNode场景下毫无作用 - 命名插槽需要你手动创建元素、设
slot="header"属性、再 append 进克隆体，不是自动行为 -
<slot></slot>内容根本不出现在template.content的子树中——它是运行时由宿主决定的，别指望用querySelector提前定位 - 项目没用 Custom Elements 全套机制时，单独引入一个自定义标签，属于过度设计——多写三行 JS 就能完成的事，不必搭整套基础设施
真正容易被忽略的不是怎么克隆，而是模板是否中立：如果里面写死 class="card card--tech" 或固定 <h1>技术博客</h1>，换到用户列表页就得重写——内容与结构耦合越紧，后期改起来越像在拆炸弹。
