single-spa子应用卸载后css残留是因框架不管理样式生命周期，需手动为style标签添加data-app-id标识并在unmount时精准移除。
子应用卸载后 CSS 不消失，是 single-spa 中最常被忽略的样式污染问题——它不是框架 bug，而是设计使然：single-spa 只管 JS 生命周期，不管 <style></style> 标签。
为什么 unmount 后 CSS 还在？
single-spa 的 unmount 生命周期只负责清理 JS 实例（如 ReactRoot、Vue 实例），但子应用通过 import './index.css' 或内联 <style></style> 注入的样式表不会自动移除。这些 <style></style> 标签仍挂在 document.head 下，持续影响全局样式。
- Webpack + CSS-Loader 默认把样式注入为
<style></style>标签，无任何标识 - qiankun 有沙箱和样式隔离机制，但 pure single-spa 没有内置样式卸载逻辑
- 多次切换子应用（比如 /app1 → /app2 → /app1）会导致同一份 CSS 被重复插入，
document.querySelectorAll('style').length持续上涨
如何给 CSS 打上可识别的标记？
核心思路：让子应用加载的样式具备唯一上下文标识，便于后续精准定位和移除。不依赖文件名或哈希，而用运行时注入控制。
- 在子应用
mount阶段，用document.createElement('style')手动插入，并添加data-app-id属性，例如：style.setAttribute('data-app-id', 'sub-react-app') - 避免直接
import './App.css'（会走 Webpack 默认注入流程）；改用require('./App.css').toString()+style.textContent = ... - 如果必须用 CSS Modules，确保构建后生成的
<style></style>标签带自定义属性：Webpack 配置中设置style-loader的attributes: { 'data-app-id': 'sub-react-app' }
在 unmount 中安全移除对应 style 标签
关键动作必须发生在 unmount 函数内，且要加防护避免误删或重复执行。
- 使用
document.querySelectorAll('style[data-app-id="sub-react-app"]')精准选取，不要用document.getElementsByTagName('style')全量遍历 - 遍历时需从后往前删除（或先收集再批量 remove），防止 NodeList 动态变化导致漏删
- 建议加 guard：检查元素是否还存在于
document.head，避免已卸载又被调用时出错 - 示例代码片段：
export const unmount = async (props) => {
// 移除样式
const styles = document.querySelectorAll('style[data-app-id="sub-react-app"]');
styles.forEach(style => {
if (style.parentNode === document.head) {
document.head.removeChild(style);
}
});
// 卸载 React 应用
ReactDOM.unmountComponentAtNode(document.getElementById('root'));
};
额外注意：CSS @import 和第三方库注入的样式
有些子应用会通过 @import 或第三方 UI 库（如 Ant Design、Element Plus）动态插入样式，它们通常不带 data-app-id，也无法被上述方式捕获。
- 这类样式无法“真正卸载”，只能靠命名空间或 CSS-in-JS 方案规避污染（如 Emotion 的
CacheProvider+key隔离） - 若必须用传统 CSS，可在子应用根容器加唯一 class（如
div.sub-react-app），所有样式用该 class 作前缀，降低全局泄漏风险 - 注意：Web Components 的
shadow DOM是终极隔离方案，但 single-spa 子应用默认不在 shadow 中运行，需手动封装
样式卸载不是“做了就完事”，而是每次子应用切换都得验证是否残留——最容易被忽略的是开发阶段热更新（HMR）触发的重复挂载，此时 unmount 可能未被调用，data-app-id 标签却已堆积。上线前务必用 document.querySelectorAll('style[data-app-id]') 快速巡检。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
