On this page

css 隔离方案

子应用之间样式隔离

Dynamic Stylesheet 动态样式表，当应用切换时移除老应用样式

添加新应用样式主应用和子应用之间的样式隔离

BEM(Block Element Modifier) 约定项目前缀
CSS-Modules 打包时生成不冲突的选择器名
Shadow DOM 真正意义上的隔离

css-in-js

javascript

let shadowDom = shadow.attachShadow({ mode: 'open' });
let pElement = document.createElement('p');
pElement.innerHTML = 'hello world';
let styleElement = document.createElement('style');
styleElement.textContent = `p{color:red}`
shadowDom.appendChild(pElement);
shadowDom.appendChild(styleElement)

1
2
3
4
5
6
7

缺点：当弹窗挂载到到弹窗上

qiankun 的 css 沙箱的原理是重写 HTMLHeadElement.prototype.appendChild 事件，记录子项目运行时新增的 style/link 标签，卸载子项目时移除这些标签。