web组件化 - 微前端子应用的样式隔离

第一篇介绍了如何将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