外部选择器对Shadow DOM内元素无效，因为浏览器在样式匹配流程中直接跳过边界，不将外部规则纳入shadowRoot内部节点的CSSOM计算，连权重比较都不会触发。
因为浏览器压根不拿外部选择器去匹配 Shadow DOM 内部节点——匹配流程在边界外就终止了，连权重计算都不会触发。
为什么 button、.app-header 这类选择器在 shadowRoot 里完全无效
Shadow DOM 是独立的样式作用域，外部定义的 button、.app-header、body 等选择器根本不会被浏览器纳入对 shadowRoot 内部节点的匹配流程。它们既不是宿主元素，也不在当前 shadow tree 的作用域内，规则直接被跳过。
- 你在
<my-card>外面写.app-header { color: red }，对 shadowRoot 里的<div class="app-header">没有任何影响 -
!important也无效——它只参与同一 CSSOM 的权重计算，而 Shadow DOM 拥有独立 CSSOM - 往
document.head动态插入<style>会污染全局，违背封装初衷
为什么 :root 或 body 上定义的 CSS 变量在 Shadow DOM 里读不到
Shadow DOM 的继承起点是宿主元素（比如 <my-card>），不是 <html>。所以 :root 声明的变量不在宿主的祖先链上，自然无法继承。
- DevTools 中点开宿主元素 → “Show inherited CSS properties”，你会发现变量压根没列出来
- 正确做法必须把变量挂到宿主自身：
<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"> 在 shadowRoot 里不生效
Shadow DOM 有样式边界，外部 CSS 文件默认不穿透。浏览器不会加载、解析或应用这些资源到 shadowRoot 内部。
立即学习“前端免费学习笔记（深入）”；
- 唯一可靠方式是把编译后的 CSS 字符串注入到 shadowRoot 内部
- 推荐用
document.createElement('style')创建后appendChild到shadowRoot - 或用
CSSStyleSheet对象 +replaceSync()动态注入（适合主题切换） -
<link href="/tailwind.css">放进 shadowRoot 不会加载，也不会报错，只是静默失效 - 注入前必须确认
attachShadow({ mode: "open" })；mode: "closed"下shadowRoot为null，所有注入静默失败
为什么 DevTools 里能看到元素，但 computed 样式里没有预期规则
这不是渲染问题，而是选择器根本没参与匹配。你看到的是 DOM 节点存在，但样式引擎压根没把它放进候选集。
- 常见误判：以为“能看见”=“能匹配”，其实只是宿主元素渲染出来了，内部样式仍为空白状态
- 检查是否用了
::part()却没在对应节点加part="xxx"属性（大小写敏感，不支持链式） - 检查是否用了
::slotted()却试图影响非第一层投射内容（比如<slot><div class="item"></div></slot>中的.item可以，但.item span不行） - 注意
:host只能影响宿主元素自身，不能用于选中 shadowRoot 内部子节点
最易被忽略的一点：all: initial 是目前唯一能彻底阻断继承的手段，但它必须加在 shadowRoot 顶层且排除 <style> 自身——写成 *:not(style) { all: initial; }，否则会把自己干掉。
