exportparts仅作用于直接宿主，不支持跨层自动透传；多层穿透需逐层显式声明exportparts，且大小写必须严格一致，否则::part()失效。
exportparts 只作用于直接宿主，不支持跨多层自动透传
exportparts 属性本身不具备递归穿透能力——它只把当前宿主元素 shadowRoot 内部的 part 值“挂载”到该宿主标签上，供其**直接父级**（light DOM 或上一层 shadow DOM）用 ::part() 选择。如果组件 A 包含组件 B，B 又包含组件 C，且 C 内部有 <button part="submit"></button>，那么仅在 B 上写 exportparts="submit" 并不能让 A 直接写 A::part(submit) 生效；A 能选中的，只有 B 自己显式 exportparts 暴露出来的那些 part 名。
多层穿透必须逐层显式声明 exportparts
要让最外层控制最内层按钮的样式，每一层中间组件都必须主动参与暴露：
- 组件 C（最内）：在 shadow 内部给按钮加 part="submit"
- 组件 B（中间）：在模板中使用 <c-element exportparts="submit"></c-element>，同时自己也要在 shadow 内给这个 c-element 标签加 part="inner-c"（如果还想被上层定制 B 的容器行为）
- 组件 A（最外）：用 <b-element exportparts="submit"></b-element>，这样 A 的 light DOM 才能写 ::part(submit) —— 此时浏览器会顺着 A → B → C 的 exportparts 链找到最终目标
常见错误现象：::part(submit) 不生效，往往是因为某一层漏写了 exportparts="submit"，或拼写大小写不一致（submit ≠ Submit）
exportparts + ::part() 不替代状态响应，需配合 :host() 使用
单纯暴露 part 只解决“能否选中”，不解决“何时应用”。例如想让禁用态下 ::part(submit) 变灰，不能只靠 ::part(submit):disabled（伪类在 ::part() 中不被支持），而必须：
- 组件 C 在其 static get observedAttributes() 中声明 "disabled"
- 在 C 的 shadow 内用 :host([disabled]) ::part(submit) 控制样式（注意：这是 C 自己写的规则，不是外部写的）
- 外部只需设置 <c-element disabled></c-element>，触发状态链即可
性能提示：只有被 observedAttributes 列出的属性变更才会触发 :host() 重匹配，未声明的属性变化不会刷新 ::part() 样式
Chrome DevTools 里看到的“穿透”可能是继承，不是 exportparts 生效
在 Elements 面板展开 shadow root 后，若发现某个元素的 color 值来自 body，别误以为 exportparts 起作用了——这只是可继承属性（color、font）沿树自然传递的结果。真正验证 exportparts 是否生效，得看：
- 元素是否渲染出非继承性样式，比如 background-color、border、transform
- 在 Computed 样式面板中，对应规则来源是否标着 user agent stylesheet 或 inline？如果是，说明没走 ::part()
- 最可靠方式：临时删掉组件内部所有 part 和 exportparts，再看外部 ::part() 规则是否完全失效
容易被忽略的一点：Safari 对 :host([attr]) ::part(x) 的响应比 :host(:hover) ::part(x) 更稳定，后者偶发延迟，生产环境慎用 hover 触发的深度定制
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
