qiankun隔离机制
- css样式隔离
在qiankun微前端项目中,css样式隔离主要有2种方案
第一种是主要是使用选择器进行样式隔离,效果如下
主要是选择器上添加上了每个自应用的标识。
第二种的话是shadow dom的方式,该方式会使整个子应用在shadow dom下渲染。类似于iframe的那种效果
可以看到子应用在shadow下渲染,全局样式也影响不到子应用了。
2.js隔离
于是在子应用中访问window时会优先访问该应用上的代理window,没有的话会访问主应用上的winow,子应用间设置window上的值不会反应到主应用上,各子应用互不影响
比如在主应用上设置window.test= ‘mian-vue’, vue2项目子应用改变window.test。 在vue2子应用中window.test为home-page,而在vue3项目子应用中访问window.test时是main-vue