微前端中HTML模板组件需封装为可挂载模块，导出bootstrap/mount/unmount函数，通过template预解析避免XSS，样式加scope或CSS Modules隔离，脚本移入JS文件，依赖沙箱隔离运行并手动清理副作用。
微前端中 HTML 模板组件如何被多个子应用复用
HTML 模板本身不具备运行时逻辑，直接共享 index.html 片段会出问题：脚本不执行、样式隔离失效、生命周期不可控。真正能复用的是「可挂载的 HTML 模块」——即带入口函数、支持动态加载、能响应父容器生命周期的轻量封装单元。
核心做法是把模板 + 脚本 + 样式打包成独立 umd 或 esm 包，导出 bootstrap、mount、unmount 三个函数。模板内容通过 innerHTML 注入或 template 标签预编译，避免字符串拼接 XSS 风险。
- 不要直接
fetch('/widgets/button.html')后el.innerHTML = html—— 样式污染、脚本不执行、无卸载机制 - 推荐用
document.createElement('template')预解析 HTML 字符串，再克隆使用，确保 script 标签不自动执行 - 样式必须加 scope 属性或使用 CSS Modules，否则子应用间 class 名冲突不可避免
Webpack 构建 HTML 组件时如何处理内联脚本和样式
Webpack 默认不处理 HTML 中的 <script> 和 <style> 标签内容，直接打包会导致逻辑丢失或全局污染。
正确方式是把 HTML 模板转为 JS 模块：用 html-loader 将 HTML 提取为字符串，再在组件 JS 中动态创建 DOM；或用 webpack-html-plugin 的 templateParameters 注入变量，但仅限构建时静态内容。
立即学习“前端免费学习笔记（深入）”；
-
html-loader配置需启用sources: { script: 'src', style: 'href' }，否则<link rel="stylesheet">和<script src>不会被解析 - 内联
<script>必须移出 HTML，写进 JS 文件并显式调用，否则无法参与模块依赖分析 - 使用
CSS in JS（如styled-components）或css-loader?modules，避免<style>标签全局生效
子应用如何安全地加载并渲染共享 HTML 组件
不能靠 import('./button.js').then(m => m.mount(el)) 简单调用 —— 缺少沙箱隔离，组件内 window、document 操作会穿透到主应用。
必须借助微前端框架的沙箱能力（如 qiankun 的 proxySandbox 或 single-spa 的 isolatedApp），确保组件 JS 运行在隔离上下文中。HTML 模板渲染本身是安全的，但其中绑定的事件监听器、定时器、DOM 查询必须限制作用域。
- mount 时传入的容器节点必须是子应用自己创建的
div，不能直接用document.body - 组件内部禁止使用
document.querySelector('body')或window.addEventListener，应改用传入的 container 节点做查询 - 卸载时必须手动清除所有事件监听器、定时器、MutationObserver，否则内存泄漏比 JS 组件更隐蔽
为什么 HTML 模板组件不适合做复杂交互逻辑
HTML 模板组件本质是「视图层快照」，没有状态管理、响应式更新、副作用控制能力。一旦需要表单校验、异步加载、条件渲染，就必须退化为完整 JS 组件。
常见误用：把 Vue/React 组件编译成 HTML 字符串后当「模板」复用 —— 这样丢失了 reactivity，用户点击按钮不会触发任何逻辑，只是静态画面。
- 适合场景：
header、footer、loading spinner、empty state等纯展示型 UI - 不适合场景：含
v-model、useState、fetch、useEffect的组件，这类必须以框架原生方式构建并导出生命周期函数 - 折中方案：用
custom element封装 HTML 模板 + 简单 JS 逻辑，通过attributeChangedCallback响应属性变化，但依然无法替代状态驱动 UI
最易被忽略的是模板更新后的 diff 成本 —— 每次 mount 都是全量 innerHTML 替换，没有虚拟 DOM 对比，高频更新会明显卡顿。
