exportparts不生效的典型原因是shadow root模式为closed或嵌套透传未逐层显式声明；必须使用mode: 'open'，且a→b→c多层穿透时，b和a均需分别声明exportparts，大小写与拼写须严格一致。
Shadow DOM 里 exportparts 不生效的典型原因
直接写 exportparts 却发现子组件样式没透传进来？大概率是 Shadow Root 类型不对或层级错位。默认 attachShadow({ mode: 'open' }) 才支持 exportparts，mode: 'closed' 下浏览器会屏蔽所有外部干预，包括 part 属性和 exportparts 声明。
另一个高频坑：嵌套 Shadow DOM 中，只有「直接父组件」能用 exportparts 向上透出 part 名，中间层必须显式转发。比如 A → B → C，C 定义了 part="button"，B 必须写 exportparts="button=inner-button"，A 才能通过 exportparts="inner-button=primary-button" 接住——漏掉任意一层，链就断了。
exportparts 的语法与作用域限制
exportparts 是属性，不是 CSS 规则，只在自定义元素的 HTML 标签上声明，不能写在 shadow 内部的 slot 或 div 上。它的值格式固定为 "source-part-name=target-part-name"，多个用空格分隔，例如：exportparts="icon=left-icon label=title"。
注意三点：
- 左侧（source）必须对应子元素真实声明的
part值，大小写、连字符必须完全一致 - 右侧（target）是当前组件对外暴露的新 part 名，供更外层选择器使用
- 不支持通配符或正则，也不能用 CSS 变量名、伪类等替代 part 名
导出嵌套 Shadow 样式时的 CSS 选择器写法
外层样式要命中被 exportparts 转发后的 part，必须用标准 ::part() 伪元素，且 target 名必须和最后一层 exportparts 中定义的右侧一致。比如三层嵌套后最终暴露为 primary-action，那样式就得写：
my-dialog::part(primary-action) { background: #007bff; }
常见错误包括：
- 误写成
my-dialog::part(button)（用了原始 part 名，而非最终 export 出来的名） - 在 light DOM 里对子组件直接写
my-button::part(icon)（此时 my-button 还没被 export，外层无权访问） - 用
::slotted()混淆概念——::slotted只匹配投射进来的节点，和part机制无关
调试 exportparts 链路是否通畅
Chrome DevTools 目前不直接高亮 part 绑定关系，但可手动验证每层是否生效：
- 右键 Shadow Root 内元素 → “Inspect” → 在 Elements 面板看该元素是否有
part属性（确认源头存在） - 检查父组件标签的属性列表，确认
exportparts值拼写正确、无多余空格 - 在控制台执行
document.querySelector('my-comp').shadowRoot.querySelector('[part="xxx"]')，看能否取到对应节点（验证 source 是否可达） - 临时加一条全局样式如
*::part(test) { outline: 2px solid red !important; }，再改 target 名反复测试
最易被忽略的是：CSS 优先级会覆盖 ::part() 样式，尤其当外层用了 !important 或更具体的选择器时，part 样式可能被静默压制——建议导出时统一用较低特异性规则，留出定制空间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
