HTML模板技术实现页面组件化自动注入方案
使用`importNode`克隆模板保留表单状态，`data-bind`与`textContent`动态传参。禁止`innerHTML`注入第三方HTML防XSS。构建时预处理（如Vite插件）优于运行时fetch，零开销且SEO友好。
在实际开发中，许多开发者使用进行组件化时，常采用innerHTML = template.innerHTML或cloneNode(true)来克隆内容，结果发现表单状态全部丢失——
用 document.importNode() 安全克隆
直接使用innerHTML = template.innerHTML或cloneNode(true)的弊端在于，它们会丢失表单状态、的选中项、的checked状态，在Shadow DOM场景下甚至完全失效。唯一健壮的克隆方法是document.importNode(tmpl.content, true)。
然而，有几个关键细节需要留意：
- 确保模板已解析完成：不要在
DOMContentLoaded事件之前读取tmpl.content，否则会得到空的DocumentFragment，导致内容为空。 - 模板ID必须唯一，不能重复注册。多次调用时建议缓存
tmpl引用，避免重复执行getElementById。 importNode返回DocumentFragment，可以直接通过appendChild添加到目标容器，该过程不触发重排，性能表现良好。
怎么让
纯本身不具备属性绑定或响应式机制，所谓的“传参”本质上是借助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风险会集中爆发。特别当片段中包含