#微前端中的主应用和子应用样式隔离方案

#ShadowDom

ShadowDom是隔离主应用和子应用最彻底也是最合理的解决方案。ShadowDom 隔离样式的原理是将子应用加载在ShadowDom里面，ShadowDom中的样式天然就和外部完全隔离。国内几个微前端框架如qiankun、micro-app都有提供ShadowDom选项。

但是在实际使用中ShadowDom并不容易用起来，比如在React17之前，需要解决事件代理问题。很多库对ShadowDom的支持也不好，需要花时间逐个测试。子应用越庞大，使用ShadowDom方案的成本会越高。

#给子应用所有选择器加前缀选择器

• 在qiankun中使用开启experimentalStyleIsolation可以给每个子应用的加根选择器，使子应用声明的样式规则只作用于该子应用

• 在micro-app中默认会加一个micro-app[name=xxx]的根选择器给所有子应用

但是这种方式只能阻止子应用样式影响到主应用，和隔离子应用间的样式，并没有办法阻止主应用样式影响到子应用。

#给父应用所有选择器加前缀

使用postcss的插件给所有类选择器加前缀，对于UI库（如antd）可以使用官方提供的配置方式。

这个方案的缺点是：无法防止标签选择器声明的样式污染。

#最小化主应用来保持样式干净

在更多情况下，主应用应该只提供基础功能，主要包括：菜单、用户认证和对子应用功能的调度。尽量保持主应用的样式干净，只声明一些类似reset.css的基础样式，可以减少将子应用集成进来之后出现样式污染的状况。这个方案需要根据使用微前端架构的目的和业务场景来确定边界。