外部样式规则进不去Shadow DOM不是权重问题，而是浏览器构建CSSOM时根本不读取外部<style>或<link>规则；唯一合法穿透方式是:host和::slotted，注入样式必须通过appendChild(style)或adoptedStyleSheets。
为什么外部样式规则进不去 Shadow DOM
不是选择器权重不够，是浏览器在构建 CSSOM 时压根不把外部 <style> 或 <link rel="stylesheet"> 的规则纳入 shadowRoot 的样式计算流程。哪怕你写 my-button button { color: red !important; }，只要那个 button 在 shadow tree 里，它就完全看不到这条规则。
常见误判现象：div { font-family: sans-serif; } 却影响了 shadow 内的文本——这不是穿透，是 CSS 继承；font-family 是可继承属性，且全局规则匹配到了 shadow 内部元素（*、div 等通配或宽泛选择器会命中），必须主动切断。
-
!important只在同一作用域内生效，跨 boundary 就像没信号 -
/deep/、::ng-deep、>>>已被 Chrome 120+ 和 Firefox 115+ 彻底移除，继续用等于放弃兼容性 - 全局
@font-face声明不会进入 shadow tree，字体需内联或通过adoptedStyleSheets注入
如何正确注入样式并防止泄漏
所有样式必须显式挂载到 shadowRoot 内部，不能靠外部 <link> 或页面 <style>“顺带生效”。否则样式就在全局作用域，既污染宿主，又无法控制 scope。
- 用
document.createElement('style')创建后shadowRoot.appendChild(style)，确保样式进入该 shadow tree 的 CSSOM - 避免
shadowRoot.innerHTML = '<style>...</style>'：这会让<style>被当普通 HTML 解析，不参与样式计算，动态更新也会失效 - 第三方 CSS（如 Bootstrap）不能直接塞
<link>到 shadowRoot；应解析其内容，转为CSSStyleSheet实例，再通过adoptedStyleSheets注入（注意 Safari 17.4+ 才稳定支持） - 慎用全局选择器：
button { }会匹配所有 button；改用:host button { }或加 scope 类名，如.foundation-block button { }
:host 和 ::slotted 是唯一合法的穿透出口
W3C 规范只允许这两个伪类有限跨 boundary，其余所谓“穿透”都是历史遗留或已被废弃的 hack。
-
:host只匹配宿主元素自身（即<my-card>这个标签），适合控制容器级样式：:host([disabled]) { opacity: 0.5; }、:host-context(.dark) { background: #1e1e1e; } -
:host(.dark)≠:host-context(.dark)：前者查宿主自己有没有 class，后者查祖先链（如<body class="dark"><my-card></my-card></body>） -
::slotted(p)只匹配带slot属性的顶层子节点（如<p slot="content">），且仅支持可继承属性：color、font、line-height、background-color可设；margin、display、width禁止设 - 别写
::slotted(*)—— 不可靠，也违背封装初衷；slot 内容的布局责任本该由使用者承担
如何彻底阻断继承链干扰
即使隔离了选择器匹配，CSS 继承仍会让 font-family、color、line-height 等从宿主“漏进来”。真正干净的隔离，需要显式重置。
- 在 shadowRoot 中注入：
:host, :host * { all: initial; }，切断所有继承 - 补充
:host *:not(style) { all: unset; }，避免<style>标签自身被重置 - 必要时显式恢复关键继承属性：
:host { direction: ltr; unicode-bidi: normal; } - 用
textContent设置 style 内容，比innerHTML更安全、语义更清晰
最易被忽略的一点：all: initial 会重置 UA 默认样式（比如 <h1> 的 margin 和 font-weight），所以实际使用时得配套恢复基础排版行为，否则组件看起来“没样式”不是 bug，是 reset 太彻底了。
