Article 1 Describes how to convert React components to web components
Part II This paper introduces that routing in web component can work normally with Shell App
Part III Describes how Sub App and Shell App interact through properties or custom events
Part IV This paper introduces the POC of micro front end realized by Web Component + React
Part V Subapplication Webpack excludes React dependent packages
Part VI Style isolation applied by child
Chapter VII Dynamic web component tag

The above articles all introduce how to use web component to implement micro front end. We know that IE needs polyfill to run React. What about the web component?
This article will explore how to run the Web Component based on React framework in IE.
First, introduce how to configure React compatible IE, and the steps are as follows:
1:npm install react-app-polyfill
2: Open index.js (or index.ts, if it is typescript), and paste the following code at the top.

import "react-app-polyfill/ie11";
import "react-app-polyfill/stable";

3: Open package.json and ensure that IE 11 is added.

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "IE 11"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "IE 11"
    ]
  }

Note: if you do not work, please delete node_modules folder, npm install, Reference link

Then configure the compatibility between Web Component and IE 11
One approach is to use VendorCopy, Reference link . I use cdn directly to add js references here. The method is as follows:
1: NPM install -- save @ webcomponents / webcomponentsjs vendor copy / / this step is required if the vendor copy instead of the cdn is referenced
2: Open index.html and add the following script nodes

<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.6.0/webcomponents-bundle.min.js" integrity="sha512-neABzIqUQsRpYr8j0afAbBmH4+i25y4lDWXbx4IuS5Q3OqZoRKyfTDuV/BdgobRefiL17edueLudPvqWlmjKjg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.6.0/custom-elements-es5-adapter.min.js" integrity="sha512-mD9EqRtOw7zLPj2nnXh4+jDkbeVkp4u7AMseVc1ZfM8VmhLP7JFTiX/dlSNM8CRqjMDcNdZREQKBbGW8wFOWZA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.6.0/webcomponents-loader.min.js" integrity="sha512-87HQlZfcdKURQiuqrvmuzZcHjj6wGfNIvQ2n8qHbyanZTMypZLRg0sgFniElrVNlLR4FW2GCDJC3b/+LmFLwwg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

cdn reference: https://cdnjs.com/libraries/webcomponentsjs

Simplify app.js

import * as React from 'react';
import ReactDOM from 'react-dom';

function SubApp() {
  return (
    <div>
      Sub-App
    </div>
  )
}

class HelloElement extends HTMLElement {
  connectedCallback() {
    const myName = this.getAttribute('my-name');

    const shadowEle = this.attachShadow({ mode: 'open' });
    ReactDOM.render(
      <div id='sub-app'>
          <SubApp></SubApp>
      </div>,
      shadowEle
    );
  }
}

const tagName = "sub-app";

if (!window.customElements.get(tagName)) {
  window.customElements.define(tagName, HelloElement);
}

function App() {

  return (
    <div className="App">
      Shell App  
      <sub-app></sub-app>
    </div>
  );
}

export default App;

index.js header to increase compatibility

import "react-app-polyfill/ie11";
import "react-app-polyfill/stable";
import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only';
import 'proxy-polyfill';
import 'core-js/features/string/repeat';

Finally, npm run start
Although the running effect of this simple demo in IE is normal, as shown in the following figure:

But our intuition tells us that if there are more complex functions (involving web components), even if IE 11 has polyfill, it is estimated that there will still be exceptions. So personally, I think the best way is to try to avoid using IE. For example, judge the browser model. If it's IE, remind users to change Chrome, Safari or FireFox. If not, change the Edge.

Another small discovery is that when browsing the web page, there is actually a project on GitHub that can directly convert React into Web Component:
https://github.com/SimonHoiberg/create-react-web-component
https://github.com/SimonHoiberg/create-react-web-component/issues/3

IE 11 compatibility steps:
npm install proxy-polyfill --save
npm install abortcontroller-polyfill --save

index.tsx header added:
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only';
import 'proxy-polyfill';

Finally, package.json is added to IE 11:
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all",
"IE 11" / / newly added
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"IE 11" / / newly added
]
},