外部样式类名默认对 shadow dom 内部元素无效，因其设计初衷是样式隔离；可继承属性如 color 会从宿主继承，::part()、css 变量和 :host() 是可控的对外暴露方式。
外部样式类名默认对 Shadow DOM 内部元素完全无效——这不是 bug，而是设计初衷。Shadow DOM 的核心价值就是样式隔离，它天然阻断全局 CSS 选择器的匹配流程。
为什么外部类名不起作用
浏览器在解析样式时，会严格区分作用域：外部 CSS 中的 .btn、#header 或 body p 这类选择器，根本不会被用来匹配 Shadow DOM 内部的节点。它们既不是宿主元素，也不在当前 shadow tree 范围内，规则直接被跳过，连权重计算都不参与。
- 即使外部写了
.my-button { color: red; }，Shadow 内部的<button class="my-button"></button>也不会变红 -
!important也无效——跨 boundary 的样式不进入同一 CSSOM，无法比权 - 往
document.head动态插入<style></style>属于污染全局，违背封装原则
哪些情况“看似生效”其实是误解
个别现象容易让人误以为外部样式穿了透，实际是继承或用户代理样式在起作用：
-
color、font-family、line-height等可继承属性，会从宿主元素向上继承（不是从外部 CSS “穿透”，而是继承链跨 boundary） -
<a></a>标签仍显示蓝色？那是用户代理样式覆盖了继承值，不是外部a { color: ... }生效了 - 用
Element.style.color = 'red'能改成功，是因为这是内联样式，优先级最高，与 CSS 作用域无关
可控的对外暴露方式
如果确实需要让外部控制内部样式，必须由组件作者主动提供接口，而非依赖类名穿透：
-
::part()：在 Shadow 内给元素加part="icon"，外部就能写my-button::part(icon) { color: blue; } - CSS 自定义变量：宿主上设
<my-button style="--accent: #2563eb;"></my-button>，Shadow 内用color: var(--accent); -
:host()匹配宿主自身状态：比如:host([disabled]) { opacity: 0.5; }，响应外部属性变化
别踩这些命名坑
有人试图靠 BEM 类名“碰运气”让外部样式生效，这不可靠且违背设计逻辑：
- 在 Shadow 内写
.search-form__input是为了语义清晰和调试方便，不是为了让外部.search-form__input能匹配到 - 禁止用后代选择器如
.form .input，它既浪费 Shadow DOM 隔离能力，又模糊模块边界 - 不同 Block 的同名 Element（如
button__icon和card__icon）必须独立命名，复用应走变量或@apply
