exportparts不是自动穿透开关，而是需逐层显式声明的part名转发链；失效主因是Shadow Root为closed模式、中间层漏写exportparts、大小写/拼写不一致或误信跨层自动透传。
exportparts 不是“让样式自动穿透”的开关，而是组件作者手动搭建的、逐层显式传递的 part 名转发链。它本身不生效，必须配合 part 属性和 ::part() 才构成完整通路。
为什么exportparts写了却没用？
最常见原因不是写法错，而是整条链断在某一层：
-
exportparts只对mode: 'open'的 Shadow Root 有效；mode: 'closed'下浏览器直接屏蔽所有外部访问，包括part和exportparts - 中间组件漏写
exportparts—— 比如 C 内有<button part="submit">，B 包含<c-element>，但 B 自己没在该标签上写exportparts="submit"，那么 A 就永远触不到submit - 大小写或拼写不一致：C 写
part="Submit"，B 写exportparts="submit"，A 写::part(submit)→ 全部失效 - 误以为
exportparts能跨两层自动透传：A → B → C，只在 C 和 A 上写，B 没参与，链就断了
exportparts 的值怎么写才对？
它的语法是 exportparts="inner-part=outer-part"，等号左边是子组件暴露的 part 名，右边是当前组件向上暴露的新名（可省略等号和右侧，表示同名透传）：
- 简单透传：
<c-element exportparts="submit">→ 外部可用::part(submit) - 重命名透传：
<c-element exportparts="submit=primary-action">→ 外部需写::part(primary-action) - 多 part 合并：
<c-element exportparts="label error=field-error icon=field-icon"> - 不能写成
exportparts="submit,icon"或exportparts="submit icon"—— 必须用等号明确映射关系
Chrome DevTools 里看到样式生效，是不是exportparts起作用了？
不一定。常见干扰项：
立即学习“前端免费学习笔记（深入）”；
- 看到某个按钮变红，其实是
color继承自宿主元素（color是可继承属性），不是::part()匹配成功 - 检查 Elements 面板时，展开 shadow root，确认目标节点确实带有
part="xxx"属性，且父级宿主标签上有对应exportparts声明 - 真正在 CSS Rules 面板里找到一条带
::part(xxx)的规则，并显示为“已启用”（非灰色禁用状态）才算验证通过 - 别依赖
@supports selector(::part(foo))的返回值判断——Firefox 至今未实现，Safari 在 iOS 16.7 之前也不稳定
真正容易被忽略的是：exportparts 的命名一旦发布，就是组件公开 API 的一部分。改名等于破坏性变更，而很多团队只在 demo 里验证了单层透传，就直接上线多层嵌套场景，结果某天发现外层主题完全失控——问题不在语法，而在链上任意一环的命名契约是否被严格遵守。
