clonenode(true)是唯一可靠克隆方式，因template.content为documentfragment不可重复插入，必须深拷贝才能多次使用，且保留结构、属性及事件监听器。
template.content.cloneNode(true) 是唯一可靠克隆方式
直接 appendChild(template.content) 只会把内容“搬走”，第二次调用时 template.content 已为空——这是最常踩的坑。浏览器把 <template></template> 内容解析为 DocumentFragment，它不是普通 DOM 节点，不能重复插入。
必须用 cloneNode(true) 深拷贝，才能得到一份独立、可多次使用的副本。这个操作不执行脚本、不加载图片，但保留所有结构、属性和已绑定的事件监听器（如果有的话）。
-
cloneNode(false)只克隆元素节点，丢弃文本和子节点，基本不用 - 克隆后若需修改 ID，务必手动重设：
clone.querySelector('[id]').id = 'new-id' - 模板含
<script></script>时，克隆后仍不会自动执行；强行eval()或动态创建 script 标签极不安全，应避免
复用池 + template 是高频刷新场景的黄金组合
纯靠 cloneNode 在每秒 10+ 次的渲染循环里仍可能卡顿——因为每次克隆都触发内存分配和 DOM 构建。真正高性能的做法是把 cloneNode 和对象池（object pool）结合。
先用 template 定义结构，再用工厂函数预创建一批节点存进数组，需要时取出，用完清空后归还。这样绕过了反复构造/析构开销。
-
recover()必须清空textContent和innerHTML，否则残留内容会在下次显示时意外出现 - 不要在
createFn里绑定事件，应在取出后按需绑定，回收前用removeEventListener解绑 - IE11 不支持
node.remove()自动清理事件，必须显式解绑，否则内存泄漏
fetch + template 是静态页最现实的 include 方案
想把导航栏、页脚抽成独立 HTML 文件复用？<template></template> 本身不支持跨文件引用，得靠 JS 加载。现代纯前端项目中，fetch() + insertAdjacentHTML() 是兼容性与简洁性兼顾的底线方案。
注意注入时机：必须等 DOMContentLoaded 触发后再操作，否则目标容器可能还没生成；插入 优先用 insertAdjacentHTML('afterbegin', html)，避免覆盖已有 <meta> 或 <link>。
- 服务端需允许同源请求；
python -m http.server默认禁 CORS，换用serve或live-server - 务必加
try/catch，对 404 或网络失败做降级处理，比如console.warn('Failed to load nav.html')，不能让整个导航栏空白 -
<slot></slot>不是include替代品——没注册自定义元素时，<my-header></my-header>就是无效标签，DOM 中可见但无行为
别把 template 当字符串模板用
<template></template> 的核心价值是 DOM 封装，不是占位符替换。用 innerHTML 拼接字符串再塞进模板里，等于放弃它的全部优势：XSS 防御失效、结构校验丢失、样式隔离失效。
正确做法是克隆后，用 textContent、dataset、setAttribute 等原生 API 填充数据。哪怕多写几行，也比字符串插值安全且可控。
- 模板含
class或data-属性时，克隆后可直接操作：clone.querySelector('.title').textContent = title - 避免在模板里写内联
onclick或onerror，这些字符串会被执行，是 XSS 高危区 - 若真要动态生成复杂结构，优先选
DocumentFragment+createElement，而非拼接 HTML 字符串
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
