::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或等它升级
