shadow dom样式隔离是浏览器原生强制行为，外部样式无法进入、内部样式无法泄露，!important和全局选择器无效是因为样式计算阶段即被边界裁剪，不参与匹配；唯一合法跨边界方式是:host和::slotted()。
Shadow DOM 的样式隔离是浏览器原生强制的行为，不是靠 CSS 优先级或命名约定模拟出来的——外部样式进不去，内部样式出不来，!important 无效是因为压根没参与样式计算，不是“权重不够”。
为什么 !important 和全局选择器都穿不透 Shadow DOM
浏览器在样式解析阶段就做了边界裁剪：所有外部 <style></style>、<link rel="stylesheet"> 都不会被纳入 shadowRoot 的 CSSOM 构建流程。哪怕你写 button { color: red !important; }，只要 button 在 shadow 内，这条规则连匹配机会都没有。
- 这不是 bug，是规范强制行为（W3C Shadow DOM v1）
-
::ng-deep、/deep/、>>>已被 Chrome 120+、Firefox 115+ 彻底移除，继续用等于放弃现代浏览器兼容性 - 想覆盖内部默认颜色？得在 shadow 内部改，或者暴露
--my-button-color这类 CSS 自定义属性供外部设置
:host 和 ::slotted() 是唯一合规的跨边界样式钩子
它们是 W3C 明确保留的两个“合法出口”，其余全是单向封闭。但用法有严格限制：
-
:host只能匹配宿主元素自身（即<my-button></my-button>这个标签），不能匹配其子元素；:host(.dark)查的是宿主有没有 class="dark"，不是查—— 那得用:host-context(.dark) -
::slotted(p)只能作用于传入<slot></slot>的 light DOM 节点，且仅支持可继承属性：color、font、line-height、background-color等；禁止设display、margin、width—— slot 内容的布局责任本该由使用者承担 - 别写
::slotted(*)全局接管，既不可靠，也违背封装初衷
第三方 CSS（如 Bootstrap、Font Awesome）怎么安全注入
不能把 <link rel="stylesheet"> 直接塞进 shadowRoot.innerHTML，那样会加载到全局作用域，失去隔离意义。正确做法是：
- 用
adoptedStyleSheets（Chrome 73+ / Safari 16.4+）动态注入已解析的CSSStyleSheet对象 - 对
<link>做资源代理：主应用拦截请求，返回带 scope 属性的 CSS 文本，再通过new CSSStyleSheet()注入 - 避免在 shadowRoot 里用
innerHTML = '<style>...</style>'—— style 标签会被当普通 HTML 解析，无法参与 CSSOM，后续动态更新会失效
容易被忽略的继承陷阱：用户代理样式会覆盖 inherit
像 <a></a>、<input> 这类元素，浏览器内置的用户代理样式（user agent stylesheet）会显式设置 color、font-family 等，导致即使宿主设置了 color: white，shadow 内的 <a></a> 仍显示为蓝色。
- 解法是在 shadow 内部样式中显式写
a { color: inherit; }，强制覆盖 UA 样式 - 注意：shadow tree 不自动继承父级的
font-family、color等，需手动重置或用inherit - 如果用
mode: "closed"，连 JS 都拿不到shadowRoot引用，调试时几乎无法 inspect 样式来源
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
