shadow dom 样式失效是因样式边界隔离导致外部样式无法进入其cssom，:host和::slotted是唯二合法跨边界方式，注入样式必须通过cssom（如appendchild(style)或adoptedstylesheets），禁止innerhtml拼接或全局link引入。
Shadow DOM 样式失效不是权重问题，是根本“看不见”
你在 里写 button { color: red !important }，但 Shadow DOM 里的 <button></button> 颜色没变——这不是选择器不够狠，是浏览器压根没把这条规则送进 shadowRoot 的样式计算流程。外部 <style></style>、<link rel="stylesheet"> 全部被边界裁剪，连匹配机会都没有。
常见错误现象：
-
document.querySelector('.shadow-inner-btn')查不到影子树内节点（默认查 light DOM） - 给
设的font-family: system-ui，Shadow 内文字却用 Times New Roman（未显式继承） - 用
shadowRoot.innerHTML = '<style>...</style>'注入样式，后续 JS 动态改style.textContent完全无效（<style></style>被当普通 HTML 解析，不进 CSSOM）
:host 和 ::slotted() 是唯二合法“穿墙”方式
W3C 规范只保留这两个伪类作为跨 boundary 的出口，其余全是单向封闭。它们不是增强选择器，而是边界协议接口，用错就等于放弃封装意义。
使用限制必须清楚：
-
:host只匹配宿主元素自身（比如<my-card></my-card>这个标签），不能写:host div.title去选内部子元素 -
:host([disabled])有效，:host-context(.theme-dark)才能响应外部 -
::slotted(p)只作用于被<slot></slot>投影进来的 light DOM 节点，且仅支持可继承属性：color、font、background-color等；禁止设display、margin、width - 别写
::slotted(*)—— 不可靠，也违背 slot 的设计本意：内容布局责任应由使用者承担
正确注入样式：别拼字符串，要进 CSSOM
样式必须参与 CSSOM 构建，否则无法动态更新、无法触发重排重绘。用字符串拼接 innerHTML 是最常见也是最危险的误操作。
推荐做法：
- 始终用
{ mode: 'open' }创建 shadowRoot，'closed'会让element.shadowRoot返回null，调试时抓瞎 - 用标准 DOM 方法注入：
const style = document.createElement('style'); style.textContent = '...'; shadowRoot.appendChild(style); - 更现代方案：用
new CSSStyleSheet()实例 +adoptedStyleSheets（Chrome 73+ / Safari 16.4+ 支持） - 必须显式重置继承链：在 shadowRoot 的顶层
<style></style>中写:host { font-family: inherit; color: inherit; }，否则用户代理样式（如<input>的默认 color）会覆盖继承值
第三方 CSS（如 Font Awesome）不能直接塞进 shadowRoot
把 <link rel="stylesheet"> 直接写进 shadowRoot.innerHTML，样式会加载到全局作用域，彻底失去隔离意义。同理，innerHTML = '<style>...</style>' 也不行——它只是插入 HTML 节点，不触发样式解析。
安全注入路径只有两条：
- 预处理 +
adoptedStyleSheets：用DOMParser解析第三方 CSS 字符串，转成CSSStyleSheet实例后注入 - 资源代理 + scoped CSS：主应用拦截
<link>请求，返回带 scope 属性的 CSS 文本，再通过new CSSStyleSheet()加载 - 已废弃的
/deep/、::ng-deep、>>>在 Chrome 120+ 和 Firefox 115+ 中已被移除，继续用等于主动放弃兼容性
真正容易被忽略的点是继承链断裂：即使写了 inherit，浏览器内置的 user agent 样式仍可能压制它，所以关键节点（如表单控件）必须显式声明 color: inherit 或 all: unset 配合重置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
