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