第一篇介绍了如何将React组件转换为Web Component
第二篇介绍了子应用(Web Component)中的路由可以正常作用与Shell App
第三篇介绍了Sub App与Shell App通过属性或自定义事件交互
第四篇介绍Web Component + React实现微前端的POC
第五篇子应用Webpack排除React依赖包
本篇在之前源码的基础上,介绍如何为微前端子应用实现样式隔离。
假设sub-app-02有根元素如下
<div id='sub-app-02'>
<App></App>
</div>
shell app中又有如下的样式定义
<style>
#sub-app-02 {
color: red;
}
</style>
那么显然shell app的这个全局样式会作用到sub-app-02上,为了防止这种样式污染,我们可以利用Web Component的shadow dom特性。代码如下:
sub-app-02 -> src/app.tsx
class HelloElement extends HTMLElement {
connectedCallback() {
const myName = this.getAttribute('my-name');
const shadowEle = this.attachShadow({ mode: 'open' }); //获取shadow dom
ReactDOM.render(
<div id='sub-app-02'>
<App></App>
</div>,
shadowEle //渲染该shadow dom
);
}
}
总结:Web Component作为子应用,可以通过Shadow Dom实现样式隔离,从而避免应用间的样式互相影响。
当然也可以通过css样式变量将全局样式传递给子应用,如下文所述:
https://developer.51cto.com/art/202009/627482.htm