微前端样式隔离、sessionStorage、localStorage隔离

1、样式隔离

前端样式不隔离，会产生样式冲突的问题，这个点在qiankun也存在
子应用1修改一个样式

button {
  background: red！important；
}

其它应用也会受到影响

• qiankun的css隔离方案（shadow dom）
  shadow dom 是 web components技术的一部分，其实就是一个 attachShadow 的 API
  
  web components 添加内容的时候，不直接 appendChild，而是先 attach 个 shadow，然后再在下面 appendChild
  

• qiankun开启strictStyleIsolation
  
  开启 strictStyleIsolation 这个属性后：
  1、外界的样式无法影响shadow dom内部；
  2、内部的样式也无法影响shadow dom外部；
  这样会派生一个很尴尬的问题：挂载到body上的dom的样式，就会全部乱了，比如modal，tootip，selection的dropdown。
  此外，项目中的一些全局的公共样式也无法用了
  

• qiankun开启experimentalStyleIsolation
  这个方案是qiankun借鉴了vue scoped css的思路，也就是对所有的样式加一层data-qiankun="应用名"的选择器来隔离
  这样的话，父应用样式，可以作用到子应用，比如在主应用全局写个样式，可以作用到子应用。但是子应用写个样式，无法影响到主应用，或者其它子应用。所以挂在body的弹框还是加不了样式，还是无法从子应用的角度为外部添加样式。
  当然，有同学可能说，加个global声明不久ok了？问题就在这里，qiankun没实现这个功能。
  
  

• 微前端样式隔离
  1、子应用开启模块化
  vue一般用scoped
  
  react一般用css-loader的modules true方案
  
  子应用模块化之后，全局样式怎么做？这其实变成了代码规范的问题。
  组件内严禁使用global提升样式级别
  
  子应用尽量不写全局样式，有主应用来维护
  大多数的微前端框架，其实子应用不会单独启动，一般都会运行在主应用环境内。
  
  
  子应用必须写全局样式时，做好命名空间
  
  当然了，从自动化角度，这些可以通过自定义eslint等样式，进行代码自动化扫描，来避免此类规范问题产生

2、sessionStorage、localStorage隔离

微前端qiankun本身没有针对sessionStorage、localStorage做隔离。
微前端应用，如果用到持久化方案的时候，主子应用其实是在操作同一空间的sessionStorage、localStorage。


为了避免冲突，主子应用可以人为做隔离

为了避免溢出，子应用卸载的时候，可以做一些合理化的移除