Shadow DOM样式隔离是浏览器在解析阶段强制裁剪作用域，外部CSS不进shadowRoot的CSSOM，!important无效；唯一合法穿透方式是:host和::slotted()，注入样式必须通过CSSOM（如appendChild(style)或adoptedStyleSheets）。
Shadow DOM 的样式隔离不是“写对选择器就能生效”，而是浏览器在解析阶段就裁剪样式作用域——外部 CSS 根本不进 shadowRoot 的 CSSOM，!important 也穿不透。真隔离，只靠边界，不靠权重。
为什么 button { color: red !important } 在 Shadow DOM 里完全无效
这不是选择器不够狠，是这条规则压根没被送进 shadowRoot 的样式计算流程。浏览器解析 HTML 时，会把 <style></style> 和 <link rel="stylesheet"> 产生的样式规则按作用域分发：light DOM 一份，每个 shadowRoot 各一份。跨 boundary 的规则直接被跳过，连匹配步骤都不执行。
- 查不到影子树内节点？默认
document.querySelector('.inner-btn')只查 light DOM，得用shadowRoot.querySelector('.inner-btn') - 字体没继承？
<body>设的font-family不会自动传进 shadow，必须显式写:host { font-family: inherit; } - 用了
/deep/或::ng-deep？Chrome 120+ 和 Firefox 115+ 已移除支持，现在跑不通
如何正确注入样式到 shadowRoot
关键在“进 CSSOM”——只有被浏览器当作样式规则解析的节点，才能参与重排重绘、响应 JS 动态修改。拼字符串塞进 innerHTML 是最常见错误。
- 禁止：
shadowRoot.innerHTML = `<div></div><style>.box { width: 100px; }</style>`——<style>被当普通 HTML 解析，后续改style.textContent无效 - 推荐：
const style = document.createElement('style'); style.textContent = '.box { width: 100px; }'; shadowRoot.appendChild(style); - 更现代：
const sheet = new CSSStyleSheet(); sheet.replaceSync('.box { width: 100px; }'); shadowRoot.adoptedStyleSheets = [sheet];（注意 Safari 16.4+ / Chrome 73+ 支持）
:host 和 ::slotted() 是仅有的合法“穿墙”方式
W3C 规范只保留这两个伪类作为跨 boundary 的出口，其余全是单向封闭。它们不是增强选择器，是边界协议接口，用错等于放弃封装意义。
立即学习“前端免费学习笔记（深入）”；
-
:host只匹配宿主元素自身，比如<my-card>这个标签；不能写:host div.title去选内部子元素 -
:host([disabled])有效，:host-context(.theme-dark)才能响应外部<body class="theme-dark"> -
::slotted(p)只作用于被<slot>投影进来的 light DOM 直接子节点，且仅支持可继承属性（color、font-family、line-height、background-color） - 禁止
::slotted(*)—— 行为不一致，且把 slot 内容的布局责任从使用者手里抢过来，违背设计初衷
容易被忽略的继承陷阱和资源问题
用户代理样式（比如 <input> 的默认边框、<a> 的蓝色）会覆盖 inherit，导致看似写了继承却没效果。第三方 CSS（如 Font Awesome）也不能直接 <link> 进 shadowRoot，否则加载到全局作用域，失去隔离。
- 想让外部主题影响组件？用
--my-theme-color: var(--theme-color, #333)+:host { color: var(--my-theme-color); } - 要注入 Bootstrap 类？先用
DOMParser提取 CSS 文本，再转成CSSStyleSheet实例，通过adoptedStyleSheets注入 - 含
url(./icon.svg)的相对路径？需提前做资源代理或内联替换，否则 404
