Shadow DOM 样式隔离是浏览器强制的边界隔离，外部样式默认无法进入，内部样式默认无法泄露；!important 和全局选择器均无效，唯一合法跨边界方式是使用 :host 和 ::slotted()。
Shadow DOM 样式隔离不是靠 CSS 优先级或命名约定，而是浏览器强制的边界隔离——外部样式默认进不去，内部样式默认出不来。 想靠写个 !important 覆盖组件内按钮颜色？没用。想用全局 button { } 统一改所有按钮？对 Shadow DOM 内的 button 无效。关键不在“怎么写得更狠”，而在“怎么合法地跨边界”。
为什么外部 CSS 不生效，连 !important 都穿不透
这不是选择器权重不够，是浏览器在样式计算阶段就跳过了跨 boundary 的匹配。外部 <style></style> 或 <link> 根本不会被纳入 shadowRoot 的样式解析流程。哪怕你在页面上写了 my-button button { color: red !important; }，只要那个 button 在 shadowRoot 里，它就完全看不到这条规则。
常见误操作：
- 用已废弃的
/deep/、::ng-deep或>>>强穿 —— Chrome 120+、Firefox 115+ 已移除支持，等于写死兼容性 bug - 把
:host(.dark)当成主题检测 —— 它只查宿主元素自身有没有class="dark"，真正要响应<my-button></my-button>，得用:host-context(.dark) - 在 shadowRoot 里直接
innerHTML = '<style>...</style>'—— style 标签会被当普通 HTML 解析，无法参与 CSSOM，后续动态更新会失效
怎么让外部样式有限影响 shadow 内容：只用 :host 和 ::slotted()
这是 W3C 规范中唯二允许跨 boundary 的 CSS 钩子，其余全是单向封闭。
立即学习“前端免费学习笔记（深入）”；
:host 匹配宿主元素自身（即 <my-button></my-button> 这个标签），可用于响应外部 class 或属性：
:host([disabled]) { opacity: 0.5; }
:host-context(.theme-dark) { background: #1e1e1e; }
::slotted() 只能匹配传入 <slot></slot> 的 light DOM 子节点，且仅支持部分继承性样式：
- 允许设：
color、font、line-height、background-color等 - 禁止设：
display、margin、position、width等布局属性 - 别写
::slotted(*)全局接管 —— 不可靠，也违背封装初衷；slot 内容的布局责任本该由使用者承担
如何安全注入第三方 CSS（如 Foundation、Font Awesome）
不能把 <link rel="stylesheet"> 直接塞进 shadowRoot.innerHTML，那样会加载到全局作用域，失去隔离意义。
正确做法是预处理 + adoptedStyleSheets：
- 用
DOMParser解析 HTML 字符串，提取所有<link rel="stylesheet">和<style></style> - 对每个 CSS URL 发起 fetch，用
CSSStyleSheet构造实例（注意：Safari 17.4+ 才稳定支持） - 调用
shadow.adoptedStyleSheets = [sheet1, sheet2]注入 - 对
url(./img.png)这类相对路径，需在 fetch 后做资源代理重写
注意：adoptedStyleSheets 不支持 @import，也不自动继承外部 CSS 变量；若要用 --primary-color，必须显式在 shadow 内通过 :host { --primary-color: inherit; } 透传。
容易被忽略的继承断裂和字体问题
Shadow DOM 默认不继承 font-family、color、line-height 等属性，哪怕它们是 CSS 继承属性。这是因为 shadowRoot 是一个独立样式上下文，父级样式树不会自动向下延伸。
解决方法只有两个：
- 在 shadow 内部
<style></style>中显式写* { font-family: inherit; color: inherit; }（推荐加到最顶层） - 或用
:host { font-family: inherit; color: inherit; }把宿主的值透进来
漏掉这点，组件就会在深色主题下文字发白、字体变回系统默认，且调试时很难定位 —— 因为控制台里看元素 computed styles，color 显示的是 “initial”，而不是 “inherited”。
