React：如何在主应用Shadow DOM中运行独立子应用？

你的需求本质就是微前端的典型场景——多个独立仓库的应用，各自独立运行开发，同时能无缝整合到主应用里，还得隔离样式和依赖。下面给你两个落地性强的方案：

1. Module Federation（Vite/Webpack/Next.js通用） #

这绝对是最贴合你需求的方案，它支持把独立构建的应用作为远程模块动态加载，每个应用保留自己的依赖、tsconfig、静态资源，还能通过配置共享公共依赖来减少打包体积。

配置步骤（以Vite为例） #

• 模块应用侧配置：在模块应用的vite.config.ts里启用Module Federation，暴露应用的入口组件：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import federation from '@originjs/vite-plugin-federation'

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'chatModule', // 模块唯一标识
      filename: 'remoteEntry.js', // 远程入口文件名
      exposes: {
        './App': './src/App.tsx', // 暴露的组件路径
      },
      shared: ['react', 'react-dom'] // 可选：和主应用共享React这类公共依赖
    })
  ],
  build: {
    modulePreload: false,
    target: 'esnext',
    minify: false,
    cssCodeSplit: true
  }
})

• 主应用侧配置：在主应用的vite.config.ts里引入模块应用的远程入口地址：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import federation from '@originjs/vite-plugin-federation'

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'hostApp',
      remotes: {
        chatModule: 'http://localhost:5174/remoteEntry.js' // 模块应用构建后的远程入口地址
      },
      shared: ['react', 'react-dom']
    })
  ]
})

• 主应用中挂载模块（结合Shadow Root）：写个封装组件，动态加载模块并挂载到Shadow Root里实现样式隔离：

import { useEffect, useRef } from 'react'

const ChatModule = () => {
  const containerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const loadModule = async () => {
      if (!containerRef.current) return
      
      // 创建Shadow Root，彻底隔离样式
      const shadowRoot = containerRef.current.attachShadow({ mode: 'open' })
      const mountDiv = document.createElement('div')
      shadowRoot.appendChild(mountDiv)

      // 动态加载模块应用的组件
      const { default: ChatApp } = await import('chatModule/App')
      // 挂载到Shadow Root内的元素上
      import('react-dom/client').then(({ createRoot }) => {
        createRoot(mountDiv).render(<ChatApp />)
      })
    }

    loadModule()
  }, [])

  return <div ref={containerRef}></div>
}

export default ChatModule

之后在主应用的任何位置，直接用<ChatModule />就能嵌入模块应用了。

Next.js适配 #

Next.js 13+也支持Module Federation，需要用@module-federation/nextjs-mf插件，配置逻辑和Vite类似，在next.config.js里配置remotes和exposes就行，挂载时同样结合Shadow Root实现样式隔离。

2. 自定义轻量挂载方案（适合简单场景） #

如果不想用Module Federation这种重型方案，也可以手动实现远程加载+Shadow Root隔离：

• 模块应用构建：把模块应用打包成UMD格式，在入口文件里暴露一个全局挂载方法：

// 模块应用src/main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

// 把挂载方法暴露到全局window对象
window.ChatModule = {
  mount: (container: HTMLElement) => {
    ReactDOM.createRoot(container).render(<App />)
  }
}

• 主应用加载挂载：在主应用里动态加载模块的构建脚本，创建Shadow Root后调用挂载方法：

import { useEffect, useRef } from 'react'

const ChatModule = () => {
  const containerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    const loadAndMount = async () => {
      if (!containerRef.current) return

      // 创建Shadow Root隔离样式
      const shadowRoot = containerRef.current.attachShadow({ mode: 'open' })
      const mountDiv = document.createElement('div')
      shadowRoot.appendChild(mountDiv)

      // 加载模块应用的构建脚本
      const script = document.createElement('script')
      script.src = 'http://localhost:5174/dist/assets/index.js' // 模块应用的构建脚本地址
      script.onload = () => {
        // 调用全局挂载方法
        window.ChatModule.mount(mountDiv)
      }
      shadowRoot.appendChild(script)
    }

    loadAndMount()
  }, [])

  return <div ref={containerRef}></div>
}

export default ChatModule

这种方式更轻量，但要自己处理依赖冲突（比如主应用和模块应用React版本不一致的问题），适合简单的模块整合场景。

关键注意点 #

• 样式隔离：Shadow Root能完全隔离模块和主应用的全局样式，要是模块用了styled-components这类CSS-in-JS库，大部分都能自动适配Shadow Root，不用额外配置。
• 依赖共享：用Module Federation的话，把React这类公共依赖配置成shared，能避免重复加载，减小整体打包体积。
• 独立开发：不管用哪种方案，每个模块应用依然可以独立运行、构建、维护自己的Git仓库，主应用只需要引入它的远程构建产物就行。

内容的提问来源于stack exchange，提问作者scrache