样式冲突问题解决

src/App.vue

@@ -48,11 +48,30 @@ html, body {
   height: 100%;
 }
 
-/* ---------- 冲突演示：主应用全局样式 ---------- */
-/* 这些通用选择器如果被子应用的同名选择器覆盖，就会发生冲突 */
+/* ---------- 主应用内容区样式（限定在主应用自身页面内） ---------- */
+/*
+   问题：子应用在 iframe: false 模式下，DOM 直接嵌入主文档，
+        挂在 <router-view> → <ChildApp.vue> → <micro-app> 下面，
+        而 <router-view> 又在 .app-main 内部。
+        所以 .app-main h2 这种「后代选择器」会穿透到子应用的 h2。
+
+   之前（会泄漏）: h2 { ... }              ← 没有作用域，100% 泄漏
+   中间（仍泄漏）: .app-main h2 { ... }     ← 子应用也在 .app-main 里！
+   现在（已修复）: .app-main > :not(.child-app-wrapper) h2 { ... }
+                    ↑ 用子选择器 > 只匹配 .app-main 的直接子元素，
+                      再用 :not(.child-app-wrapper) 排除子应用容器，
+                      彻底阻断样式进入 micro-app 内部
+
+   DOM 层级示意：
+     .app-main
+       ├── div.home-page            ← :not(.child-app-wrapper) → ✅ 样式生效
+       └── div.child-app-wrapper    ← 被 :not() 排除 → ❌ 样式不生效
+             └── <micro-app>
+                   └── 子应用 h2/button/p...  ← 安全，不受主应用样式影响
+*/
 
 /* 冲突点 ①：h2 — 主应用想要紫色渐变标题 */
-h2 {
+.app-main > :not(.child-app-wrapper) h2 {
   font-family: 'Microsoft YaHei', sans-serif !important;
   font-size: 20px !important;
   color: #667eea !important;
@@ -65,7 +84,7 @@ h2 {
 
 
 /* 冲突点 ②：button — 主应用想要紫色直角按钮 */
-button {
+.app-main > :not(.child-app-wrapper) button {
   background: #667eea !important;
   color: #fff !important;
   border: none !important;
@@ -76,13 +95,13 @@ button {
   cursor: pointer !important;
   letter-spacing: 0 !important;
 }
-button:hover {
+.app-main > :not(.child-app-wrapper) button:hover {
   background: #5a6fd6 !important;
   transform: none !important;
 }
 
 /* 冲突点 ③：p 段落 — 主应用想要紧凑排版 */
-p {
+.app-main > :not(.child-app-wrapper) p {
   font-size: 14px !important;
   line-height: 1.6 !important;
   color: #444 !important;
@@ -90,26 +109,26 @@ p {
 }
 
 /* 冲突点 ④：table — 主应用想要紫色无边框表格 */
-table {
+.app-main > :not(.child-app-wrapper) table {
   border-collapse: collapse !important;
   width: 100% !important;
   border: none !important;
 }
-th {
+.app-main > :not(.child-app-wrapper) th {
   background: #667eea !important;
   color: white !important;
   padding: 8px !important;
   text-align: left !important;
   font-size: 13px !important;
 }
-td {
+.app-main > :not(.child-app-wrapper) td {
   padding: 6px 8px !important;
   border-bottom: 1px solid #e0e0e0 !important;
   font-size: 13px !important;
 }
 
 /* 冲突点 ⑤：code 标签 — 主应用想要紫色代码块 */
-code {
+.app-main > :not(.child-app-wrapper) code {
   background: #e8e0f0 !important;
   color: #5e35b1 !important;
   border: 1px solid #b39ddb !important;

src/config/subApps.ts

@@ -54,13 +54,13 @@ export const subApps: SubAppConfig[] = [
     url: 'http://localhost:5174/',
     baseroute: '/mock-app',
     // ============================================
-    // ⚠️ 样式冲突演示专用：
-    // iframe: false → 子应用 DOM 直接嵌入主文档
-    // disableScopecss: true → 关闭样式隔离，双方样式互相泄漏
-    // 这是一个纯 HTML 页面（无 JS 框架），不需要 ES Module 支持
+    // ✅ iframe: true — 浏览器原生隔离，样式/JS 完全不互通
+    // 之前（有样式穿透）: iframe: false
+    //   → 子应用 DOM 嵌入主文档 → 主应用的 .app-main h2 泄漏进去
+    // 现在（已修复）: iframe: true
+    //   → 子应用在独立 iframe 中运行 → 完全隔离 ✅
     // ============================================
-    iframe: false,
-    disableScopecss: true,
+    iframe: true,
     keepAlive: true,
     routerMode: 'native'
   },
@@ -68,13 +68,8 @@ export const subApps: SubAppConfig[] = [
     name: 'mock-app-2',
     url: 'http://localhost:5175/',
     baseroute: '/mock-app-2',
-    // ============================================
-    // ⚠️ 子应用间样式冲突演示：
-    // 与 mock-app 相同：iframe: false, disableScopecss: true
-    // 用于验证：前一个子应用的样式是否会影响后一个子应用
-    // ============================================
+    // ✅ 同上：使用默认样式隔离
     iframe: false,
-    disableScopecss: true,
     keepAlive: true,
     routerMode: 'native'
   }