必须用document.importnode(tmpl.content, true)安全克隆内容，它能保留表单状态、select选中项、checkbox checked态及shadow dom兼容性；innerhtml或clonenode(true)会丢失这些原生行为。
用 document.importNode() 安全克隆 <template></template> 内容
直接 innerHTML = template.innerHTML 或 cloneNode(true) 会丢掉表单状态、<select></select> 选中项、<input type="checkbox"> 的 checked 状态，甚至在 Shadow DOM 场景下失效。必须用 document.importNode(tmpl.content, true) —— 它才是真正保留 DOM 行为语义的克隆方式。
- 确保模板已解析完成：不能在
DOMContentLoaded前读取tmpl.content，否则拿到空 DocumentFragment - 模板 ID 要唯一，且不能重复注册；多次调用时建议缓存
tmpl引用，避免反复getElementById -
importNode返回的是 DocumentFragment，可直接appendChild到目标容器，不触发重排
怎么让 <template></template> 支持传参和动态填充
纯 <template></template> 没有属性绑定或响应式机制，“传参”本质是 JS 工厂函数接收对象，再手动映射到节点。它不是 Vue 的 v-bind，而是显式查找 + 替换。
- 用
data-bind="title"这类语义化标记，比class="js-title"更易维护、不易被样式类误删 - 文本内容统一用
textContent（防 XSS），HTML 片段才用innerHTML，且需确保来源可信 - 禁止在模板里写死
id="card-1"—— 多次实例化会导致 ID 冲突，影响querySelector和 label 关联 - 若需更新已有实例，不要重新克隆，而是缓存首次生成的 fragment，后续只改
textContent或dataset值
为什么不能靠 innerHTML 直接注入第三方 HTML 片段
直接 container.innerHTML = fetchedHtml 是最常见也最危险的做法：样式泄漏、脚本执行失控、ID 冲突、XSS 风险全部集中爆发。尤其当片段含 <style></style> 或第三方 CSS 类名（如 .button）时，极易覆盖宿主页面全局样式。
- 第三方 CSS（如 Foundation、Font Awesome）必须限定作用域 —— 唯一可靠方式是注入到 Shadow DOM 的
shadowRoot - 内联
<script></script>不会自动执行，需手动eval或创建script元素并 append，但有 CSP 风险 - 图片、字体等资源路径是相对当前页面的，不是相对于模板文件位置，容易 404
- 如果宿主页面禁用了
eval或启用了严格 CSP，动态脚本注入基本不可行
构建时预处理比运行时注入更稳
本地开发能跑通、上线就错，往往是因为依赖运行时 fetch —— 而构建时合并 HTML 片段，输出即完整 HTML，零运行时开销，SEO 友好，CDN 缓存也最有效。
- Vite 用户用
vite-plugin-html，支持<!-- @include ./components/header.html -->语法 - Webpack 用户配
html-loader+html-webpack-plugin，可用require('./header.html')导入 - 路径是相对于项目根目录（即
vite.config.js或webpack.config.js所在位置），不是相对于当前 .html 文件 - 禁止用 SSI（
<!--#include file="header.html" -->）—— 本地无法预览，也无法传参或做条件渲染
真正难的不是“把 header 插进去”，而是“header 里的 logo 路径变了、菜单加了新项、版权年要自动更新到 2026 年 6 月 30 日”——这些逻辑必须落在数据层或构建流程里，而不是靠人肉改 HTML。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
