动态引入CSS导致样式污染的根本原因是绕过Vue隔离机制而全局注入。script中import CSS会生成无前缀的style标签插入head；动态import需手动清理旧style并用ID管理；微前端中应改用JS注入到容器节点或构建时加前缀。
动态引入 CSS 本身不会导致样式污染，真正出问题的是 import 的位置、作用域和注入时机——它绕过了 Vue 的 scoped 或 module 隔离机制，直接把规则塞进全局 CSSOM。
在 script 中 import CSS 就等于全局注入
这是最常踩的坑。只要你在 <script> 块里写 import '@/styles/theme.css'，无论这个文件内容是否带 scoped，它都会被 Webpack/Vite 当作普通 CSS 模块处理，最终生成一个无前缀、无属性限定的 <style> 标签插入 <head>。
- 现象：改了
theme.css里的.btn，所有页面的按钮都变了 - 原因：该 CSS 没绑定任何组件作用域，浏览器把它当全局样式解析
- 对比：
<style scoped>或<style module>是编译期行为，而script中的import是运行时注入，两者根本不在一个隔离轨道上
import() 动态加载未清理旧样式
主题切换、夜间模式等场景常用 import('./themes/dark.css')，但如果不手动移除前一次注入的 <style> 标签，就会出现多个同名规则并存，!important 冲突、优先级错乱、开发者工具里堆满重复 <style id="theme-dark">。
- 必须配合唯一 ID 管理：
const style = document.createElement('style'); style.id = 'theme-dark'; - 每次加载前先执行：
document.getElementById('theme-dark')?.remove(); - 否则 HMR 或多次切换后，
document.querySelectorAll('style[id^="theme-"]').length会持续增长，GC 无法回收关联的CSSStyleSheet实例
微前端子应用中动态 CSS 逃逸沙箱
qiankun 的 experimentalStyleIsolation 对 Vite 子应用基本无效——因为 Vite 的 CSS 加载走的是 import 'xxx.css' → 插入 <head> 的路径，qiankun 劫持不到这个过程。
立即学习“前端免费学习笔记（深入）”；
- 结果：子应用动态加载的 CSS 仍进主文档 CSSOM，和其他子应用、主应用样式混战
- 正解：不用
import，改用 JS 手动创建<style>并注入到子应用容器节点内（如container.appendChild(styleEl)） - 更彻底：用
postcss-prefix-selector在构建时给所有选择器加前缀，比如.btn→.subapp-order .btn
动态 CSS 的“污染”不是魔法，而是你亲手把它放进了不该放的地方。关键不在“动”与“静”，而在“谁管它”——Vue 不管 script 里倒进去的东西，浏览器也不认 scoped 对运行时注入的约束。真要安全，就得自己扛起 ID 管理、节点清理、作用域前缀这三件事。
