CSS选择器在ShadowDOM中使用：::part与::theme详解

本文深入解析了CSS在Shadow DOM中实现样式定制的关键机制，澄清了长期被误传的`::theme`根本不存在的事实，强调`::part`才是唯一标准且受支持的选择器——它要求组件作者主动在内部元素上标记`part`属性，仅允许外部进行样式声明（不支持JS操作或嵌套选择），并明确其与`::slotted`、自定义属性的协同边界；文章还指出，真正可靠的主题化方案是结合`part`暴露样式锚点与CSS自定义属性传递动态值，同时提醒开发者正确认识Shadow DOM“有控制地封装”的设计哲学——样式隔离并非完全封闭，而是通过`part`、`:host`、`::slotted`和自定义属性这四大受控出口实现安全、可维护的定制能力。

Shadow DOM里为什么::part选不到元素

因为::part不是用来在外部样式表里“穿透”进Shadow DOM的通用选择器，它只对显式用part属性标记过的节点生效。没加part="foo"的内部元素，再怎么写my-element::part(foo)都无效。

常见错误现象：::part(button)一直不生效，检查发现组件内部的按钮根本没设part="button"；或者误以为::part能替代:host ::slotted(*)去样式化插槽内容——不能，插槽内容不属于Shadow DOM内部节点，::part管不到。

• 必须由组件作者主动暴露：在Shadow DOM内层元素上添加part="xxx"属性
• 外部样式只能作用于该part名，且仅限于样式声明（不能读取、不能JS查询）
• ::part不支持嵌套写法，比如::part(foo)::part(bar)非法
• 浏览器兼容性：Chrome 73+、Edge 79+、Safari 17.4+（Firefox暂未实现）

::theme根本不存在，别被旧文档误导

::theme从未进入任何CSS规范草案，也不是Chrome或WebKit的实验性功能。目前所有声称支持::theme的博客、教程或代码示例，基本源于2014年前后早期Shadow DOM v0提案的误传，或把Polymer 1.x的私有机制当成了标准。

真实使用场景：零。没人该用它，也没人能用它。如果你在调试时看到控制台报错Invalid CSS selector "::theme(foo)"，说明你粘贴了过期资料里的代码。

• 查MDN、Can I Use、CSSWG GitHub仓库，均无::theme条目
• Polymer 1.x的::theme是其自定义的编译时替换机制，和原生Shadow DOM无关
• 想实现主题透传，实际方案只有两个：part + 自定义属性（--my-theme-color），或通过JS动态切换host上的类名

替代::theme的可行方案：CSS自定义属性 + part

真正跨组件传递主题的可靠方式，是组合使用part和CSS自定义属性。父容器定义变量，子组件在Shadow DOM中用var(--my-color)消费，同时用part开放局部样式钩子。

例如一个按钮组件，内部结构为，外部可这样控制：

my-button {
  --my-button-bg: #007bff;
}
my-button::part(base) {
  background-color: var(--my-button-bg);
  border: none;
}

• 自定义属性天然继承，无需穿透，Shadow DOM内可直接var()读取
• ::part只负责提供样式锚点，不承担变量传递职责
• 避免在::part里写死颜色值，否则主题无法动态切换
• 注意作用域：自定义属性需在:host或更高层设置，不能只写在::part规则里

Shadow DOM样式封装边界在哪

Shadow DOM的样式隔离不是铁壁，而是有明确“出口”的设计：只允许part、:host、::slotted和自定义属性这四种机制向外暴露控制点。其他一切“穿透”尝试（比如/deep/、::shadow）早已被废弃且不工作。

容易被忽略的复杂点：当多个part名相同但语义不同（比如两个独立组件都用了part="label"），外部样式会同时命中两者——没有命名空间隔离，得靠组件前缀或更具体的宿主选择器来限定范围。

• ::slotted(*)只能样式化投射进来的内容，不能改其子树内部结构
• :host(.active) ::slotted(*)这种组合是合法的，但:host ::slotted(.active)不行——伪类不能写在::slotted内部
• 第三方UI库若没暴露part，你就没法安全定制，只能覆盖:host或等它升级

理论要掌握，实操不能落！以上关于《CSS选择器在ShadowDOM中使用：::part与::theme详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！