button、.app-header等选择器在Shadow DOM内部无效，因为浏览器解析时根本不会将其纳入匹配流程——它们既非宿主元素也不在当前shadow tree作用域内，规则被直接跳过；CSS变量需定义在宿主或其直系祖先上才能被继承读取。
为什么 button、.app-header 这类选择器在 Shadow DOM 内部写无效
因为浏览器压根不拿这些选择器去匹配 Shadow DOM 里的节点——它们既不是宿主元素，也不在当前 shadow tree 的作用域内。规则直接被跳过，连权重计算都不会触发。
常见误操作包括：
- 在 shadow 内部
<style>中写button { color: red }，以为能覆盖外部按钮样式（实际只影响自己内部的<button>） - 用
!important强行加权（无效，跨 boundary 不参与同一 CSSOM） - 往
document.head动态插入<style>（污染全局，违背封装）
:root 或 body 声明的 CSS 变量为啥在 Shadow DOM 里读不到
因为 Shadow DOM 的继承起点是宿主元素（比如 <my-card>），不是 <html>。:root 只匹配文档根节点，而它根本不在宿主的祖先链上。
DevTools 里点开宿主元素 → “Show inherited CSS properties”，你会发现变量压根没列出来。
立即学习“前端免费学习笔记（深入）”；
正确做法必须把变量挂到宿主自身上：
- 行内 style：
<my-card style="--card-bg: #f8f9fa;"> - CSS 规则绑定宿主：
my-card[theme="dark"] { --card-bg: #1e1e1e; } - JS 动态设置：
el.style.setProperty('--card-bg', '#f0f0f0')
写成 .wrapper > my-card { --card-bg: red; } 是无效的——变量没挂到 my-card 上，继承链就断了。
为什么 @import、<link rel="stylesheet"> 在 Shadow DOM 里完全不生效
Shadow DOM 有样式边界，外部 CSS 文件默认不穿透。浏览器不会把 .btn 规则应用到 shadowRoot.querySelector('button') 上。
唯一可靠方式是把编译后的 CSS 字符串注入到 shadowRoot 内部：
- 用
document.createElement('style')创建后appendChild到shadowRoot - 或用
CSSStyleSheet对象 +replaceSync()动态注入（适合主题切换） - 不能只放
<link href="/tailwind.css">—— 它不会加载，也不会解析
注意：注入前必须确认 mode 是 "open"；mode: "closed" 下 shadowRoot 为 null，所有注入静默失败。
::part() 和 ::slotted() 不是“穿透开关”，而是有严格前提的通信通道
::part() 只对显式带 part="xxx" 属性的内部节点生效，大小写敏感，不支持链式选择（如 ::part(icon)::before 非法）。
::slotted() 只能影响被 <slot> 投射进来的第一层内容，且仅允许设置可继承属性（color、font、background-color 等），margin、display 这类布局属性会被浏览器忽略。
两者都不能替代宿主变量声明，也不能绕过作用域限制——它们只是规范定义的、有限但可控的内外样式通信方式。
最容易被忽略的是：iOS Safari 16.4 之前存在引擎级 bug，哪怕 :host 里写了变量，Shadow DOM 内部仍读不到；这不是写法问题，是必须加 UA 检测或降级的硬限制。
