Shadow DOM 不创建层叠上下文，但内部满足特定条件的 CSS（如 position+z-index、transform、opacity<1 等）会触发独立层叠上下文；需通过 :host 控制宿主层级，避免子元素意外隔离，slot 内容继承宿主上下文，可用 ::slotted 或 ::part 精细协调。
Shadow DOM 本身不创建层叠上下文，但它为组件内层叠行为提供了可控的起点。真正决定 z-index 是否生效、是否被截断的，是组件内部是否意外触发了新的层叠上下文 —— 这恰恰是管理复杂层叠的关键切入点。
明确层叠上下文的“触发点”在哪
在 Shadow DOM 内部，任何满足以下条件的 CSS 声明都会让该元素成为层叠上下文根节点（即“隔离卡”）：
- position: relative/absolute/fixed/sticky + z-index 不为 auto
-
transform（哪怕只是
transform: translateZ(0)或translateX(0)） - opacity 小于 1
- filter、will-change、perspective 等属性有非默认值
- isolation: isolate
这些规则和 light DOM 完全一致，但关键区别在于：它们只影响 shadow tree 内部的层级关系，不会和外部页面的 z-index 直接比大小。
用 :host 控制宿主层级，而非内部元素
宿主元素（即 custom element 自身）默认处于 light DOM 层级中。若需让它“浮起”，必须对宿主设置 z-index —— 但只能在 Shadow DOM 内部的 <style> 中通过 :host 实现：
- ✅ 正确：
:host { position: relative; z-index: 10; }（宿主获得独立层叠上下文） - ❌ 无效：
.my-panel { z-index: 10; }单独写没用，除非它的父容器已建立层叠上下文 - ⚠️ 注意：
:host本身不自动创建层叠上下文，必须搭配position和有效z-index
避免子元素意外“自立门户”
组件内部常见翻车场景：一个下拉菜单弹出后被父卡片遮挡。问题往往出在父容器（比如 <card>）上写了 transform: translateY(0) —— 它悄悄成了层叠将军，导致其内部所有 z-index 都只能在它划定的“军区”里排座次。
- 排查方式：在 DevTools 的 Elements 面板中右键元素 → “Show layers”，看哪些节点标为 “Stacking context”
- 修复策略：移除不必要的 transform/opacity；或把需要穿透的元素（如 modal、tooltip）提升到
:host同级，甚至用fixed定位脱离父级流 - 进阶技巧：用
:host([open]) { z-index: 1000; }动态控制宿主层级，比在子元素上堆z-index: 9999更可靠
跨 slot 内容的层叠协调
通过 <slot> 投影进来的 light DOM 内容，默认继承宿主的层叠上下文，但无法被 shadow 内部 :host .item 这类选择器直接控制 z-index。
- 若需统一调度，建议由宿主统一管理层级：例如
:host([modal]) { z-index: 2000; }，再让 slot 内容自然跟随 - 如需精细控制 slot 子项，可用
::slotted(*)设置基础样式（如position: relative），再配合宿主状态驱动变化 - 更灵活的方式：组件内为关键投影节点标记
part="trigger"或part="panel"，外部可通过::part(trigger)安全定制，且不影响层叠逻辑
