exportparts不是样式穿透开关，而是将内层part名逐级挂载到宿主标签供::part()选中；常见失效原因包括链路未对齐、大小写不一致、closed模式、缺少对应part属性、动态绑定无效及slot上误用part。
exportparts 不是“让样式穿透 Shadow DOM”的魔法开关，它只是把内层 part 名字一层层挂到宿主标签上，供外层用 ::part() 选中——漏写一层、拼错大小写、用了 closed 模式，整条链就断了。
为什么exportparts声明了但::part()不生效
最常见原因不是语法写错，而是链路没对齐：
- 子组件 shadow 内元素写了
part="icon"，但父组件标签没加exportparts="icon"属性（只在 shadow 内部写没用） - 嵌套三层 A → B → C，B 声明了
exportparts="icon"，但 A 没对 B 的标签再写一遍exportparts="icon"，A 就无法命中 C 的 icon - 拼写不一致：
exportparts="Icon"和::part(icon)大小写不同，浏览器视为两个名字 - Shadow Root 是
mode: 'closed'，exportparts直接被忽略，el.shadowRoot返回null，DevTools 里都看不到结构
exportparts必须配合part属性使用，不能单独存在
exportparts 本身不创建样式接口，它只是转发器。没有源头，转发就是空转：
- 只在自定义元素标签上写
<my-input exportparts="label">，但 shadow 内没任何节点带part="label"，外部my-input::part(label)一定无效 -
part必须是静态字符串，part={this.labelPart}或:part="label"这类动态绑定全部被忽略 - 同一个节点可声明多个值：
part="label required error"，外部可用::part(required)单独匹配 - 别在
<slot>上写part——::part()不匹配 slot 元素本身，只匹配它分发进去的真实子节点（那是::slotted()的事）
多层exportparts透传时的命名与调试要点
逐层暴露不是为了“穿透”，而是为了构建一条可验证的样式委托链：
立即学习“前端免费学习笔记（深入）”；
- 每层的
exportparts值格式固定为"source=target"，比如 C 暴露submit，B 转发为exportparts="submit=inner-submit"，A 再转为exportparts="inner-submit=primary-action"，最终外层只能用::part(primary-action) - Chrome DevTools 不高亮 part 关系，验证方法是：右键 shadow 内目标元素 → Inspect → 看 Elements 面板是否真有
part="xxx"；再点回上层宿主标签，看属性面板是否有对应exportparts值，且无多余空格 - 不要依赖继承颜色“看起来生效”——
color会自然继承，但background、border不会。真正生效得靠::part(xxx)规则出现在 computed styles 里 - Firefox 至今不支持
::part()，@supports selector(::part(foo))永远返回false；iOS Safari 15.4+ 才开始支持，且需用户手动开启实验特性
真正难的不是写对 exportparts，而是决定哪些 part 名该成为公开 API——一旦定名，改名等于破坏第三方依赖，连大小写都不能动。
