样式冲突问题解决

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;