在微前端架构中，利用 shadow dom 实现物理级别的 css 隔离，核心做法是将每个子应用的根节点挂载为 shadow root。浏览器原生机制会阻止外部样式穿透进入 shadow dom 内部，同时内部的样式也不会泄漏到全局，从而彻底解决样式冲突问题。
如何配置 Webpack 以支持 Shadow DOM 模式
要实现这一目标，需要修改构建工具配置并调整应用入口代码。主要步骤包括启用 Webpack 的 `output.uniqueName` 以避免 chunk 文件名冲突，并在 JavaScript 入口文件中创建 Shadow Root 并将应用内容注入其中。
// main.js
import { createApp } from 'vue';
import App from './App.vue';
// 1. 获取或创建 shadow root
const container = document.getElementById('micro-app');
let shadowRoot = container.shadowRoot;
if (!shadowRoot) {
shadowRoot = container.attachShadow({ mode: 'open' });
}
// 2. 将应用挂载到 shadow root
const app = createApp(App);
app.mount(shadowRoot); // Vue 3 支持直接挂载到非 DOM 节点或特殊处理
// 注意：Vue CLI / Vite 可能需要额外插件如 @originjs/vite-plugin-federation
// 或手动处理 CSS 提取，确保 CSS 也被注入 shadowRoot
预期结果：应用组件内的所有样式仅作用于 Shadow DOM 内部，全局 CSS 无法影响子应用，子应用样式也不会污染全局页面。
如何处理子应用间的样式隔离与共享
当多个子应用共存时，每个子应用应独立拥有自己的 Shadow Root。若需共享基础样式（如字体、颜色变量），可通过 CSS 自定义属性（Custom Properties）在全局定义，并在 Shadow DOM 内通过 `var()` 引用，因为 CSS 变量具有继承性且不受 Shadow DOM 隔离限制。
/* global.css - 全局引入 */
:root {
--primary-color: #1890ff;
--font-size-base: 14px;
}
/* sub-app-1/styles.css - 在 Shadow DOM 内 */
.button {
color: var(--primary-color); /* 可访问全局变量 */
font-size: var(--font-size-base);
background: red; /* 局部样式，不影响其他应用 */
}
预期结果：子应用可以复用全局设计系统变量，但局部样式完全隔离，避免类名冲突。
Shadow DOM 模式下路由跳转会导致样式丢失吗
不会。只要路由切换发生在同一个 Shadow Root 内部，样式就不会丢失。因为 Shadow DOM 是一个独立的 DOM 树，其内部的样式表与应用生命周期绑定，而非与 URL 路径绑定。路由库（如 Vue Router 或 React Router）在 SPA 模式下通常只更新视图组件，不重新挂载整个 Shadow Root，因此样式保持有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
