shadow dom 通过浏览器原生封装边界实现样式隔离，外部css默认无法穿透，内部样式不泄露；:host和::slotted()是唯一合规的跨边界样式钩子，!important无效因作用域隔离而非优先级问题。
Shadow DOM 怎么实现样式隔离
靠的是浏览器原生的封装边界，不是靠 CSS 选择器权重或命名约定。每个 shadowRoot 是一个独立的 DOM 树根节点，外部 CSS 默认进不去，内部样式默认出不来——这是规范强制行为，不是“建议”。
- 外部样式表（包括
<link rel="stylesheet">和<style></style>）不会穿透到shadowRoot内部，除非显式用:host或::slotted() -
shadowRoot内的<style></style>只作用于该 shadow tree，不影响 light DOM 或其他组件 - 没有启用
mode: "open"的话（比如用attachShadow({mode: "closed"})），JS 甚至拿不到shadowRoot引用，更别说改样式了
为什么 !important 也穿不透 Shadow DOM
因为根本不是优先级问题，而是作用域隔离。浏览器在样式计算阶段就跳过了跨 boundary 的匹配——它压根不把外部 CSS 规则放进 shadow tree 的样式解析流程里。
- 你在页面上写
button { color: red !important; }，对自定义<my-button></my-button>内部的<button></button>无效，除非它在 shadow 内被:host或::slotted()显式接收 -
!important只在同一个样式作用域内比较优先级，跨 shadow boundary 就像跨进程通信，没通道 - 想覆盖内部默认样式？得在 shadow 内部改，或者暴露 CSS 自定义属性（
--my-button-color）供外部设置
:host 和 ::slotted() 是唯一合法的“出口”
它们是 W3C 规范中明确允许从 shadow 内向外影响、或从外向内注入的两个钩子，其余全是单向封闭。
-
:host匹配宿主元素自身（即<my-button></my-button>这个标签），可用于响应外部 class 或属性，例如:host([disabled]) { opacity: 0.5; } -
::slotted(<p>)</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/ai/778" title="Bardeen AI"><img src="https://img.php.cn/upload/ai_manual/001/503/042/68b6da1a6d59a334.png" alt="Bardeen AI" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/ai/778" title="Bardeen AI">Bardeen AI</a> <p>使用AI自动执行人工任务</p> </div> <a href="/ai/778" title="Bardeen AI" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>匹配传入的 light DOM 子节点（即 slot 中的内容），但只能设有限样式：颜色、字体、行高、部分 background 相关属性；不能改 display、margin、position 等布局属性 - 别试图用
:host ::slotted(*)全局接管内容样式——既不可靠，也违背封装初衷；slot 内容的布局责任本该由使用者承担
常见误操作：用 /deep/ 或 ::ng-deep 强穿
这些是旧版 Angular / Vue 的深度选择器 hack，早已被标准废弃，现代浏览器（Chrome 120+、Firefox 115+）已移除支持，继续用等于写死兼容性 bug。
立即学习“前端免费学习笔记（深入）”；
-
/deep/、::ng-deep、>>>都不是标准，也不在 Shadow DOM 规范里，纯属框架临时补丁 - 它们实际是把样式提升到全局 scope，破坏封装，还可能污染其他组件
- 替代方案只有两个：用 CSS 自定义属性（
--my-comp-bg）做可配置点，或用 JS 动态在shadowRoot内插入 style 块（需谨慎控制更新时机）
真正难的不是写对 shadowRoot，而是想清楚哪些样式该暴露、哪些该锁死——边界画在哪，比怎么画更重要。
