CSS选择器在Shadow DOM中的应用_::part与::theme简介

::part只能选中显式标记part属性的shadow dom内元素，不支持穿透未标记节点、插槽内容或嵌套写法，且仅限样式声明；::theme根本不存在，属过时误传。

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开放局部样式钩子。

例如一个按钮组件，内部结构为<button part="base"><slot></slot></button>，外部可这样控制：

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