::part(label) 无效是因为浏览器仅匹配 shadow DOM 中严格匹配 part="label" 的节点，大小写、拼写、空格必须完全一致；需在 DevTools 中手动确认存在且拼写正确，动态绑定、选择器链、宿主标签加 part 均无效。
为什么写了 ::part(label) 却完全没反应
因为浏览器只匹配 shadow DOM 内部真实存在 part="label" 属性的节点，大小写、拼写、空格都必须严格一致——part="Label"、part="label-required" 或 part="label required"（后者可被 ::part(required) 单独命中）都会导致失效。它不报错、不警告，样式规则直接被跳过。
检查方式：在 DevTools 中右键组件 → “Inspect”，进入 shadow root 后手动搜索 part="label"；别猜语义名，必须亲眼确认存在且拼写正确。
-
::part()只作用于 shadow 内部子节点，宿主标签自身加part属性无效 - 动态绑定无效：
part={this.state.type}、:attr(part)、模板字符串插值均不触发样式计算 -
<slot></slot>元素上不能加part；想样式化投射内容，请用::slotted()
::part() 的语法边界在哪
::part() 是单点锚定伪元素，不是选择器链起点。它后面不能接任何其他选择器，也不支持伪元素、属性选择器或关系选择器。
- ❌ 非法：
my-input::part(wrapper) input、my-button::part(label)::before、:host::part(label) - ✅ 合法：
my-button::part(label)—— 所有样式必须直接定义在这个伪元素上 - 同一节点可声明多个 part：
part="label required error"，外部可用::part(required)单独选中
嵌套 Shadow DOM 怎么让 ::part() 生效
如果组件内部还包含另一个自定义元素（比如 <editor-toolbar>），外部 ::part(toolbar) 默认无法穿透到它的 shadow 内部——必须由外层组件通过 exportparts 显式透传。
立即学习“前端免费学习笔记（深入）”；
-
exportparts必须写在宿主元素标签上，例如：<my-editor exportparts="toolbar:inner-toolbar"> - 然后外部才能写：
my-editor::part(inner-toolbar)，而不是my-editor::part(toolbar) - 透传是逐层的：A → B → C，每层都得用
exportparts显式声明，缺一层就断掉
兼容性现实和降级怎么做
::part() 在 Chrome 97+、Edge 97+ 原生支持；Safari 自 15.4 起支持但需开启实验性功能；Firefox 截至 2026 年 9 月仍不支持——@supports selector(::part(foo)) 在 Firefox 中永远返回 false。
- 必须用
@supports包裹关键样式，并提供降级方案 - 降级推荐 CSS 自定义属性：
my-component { --label-color: red; }，组件内部用var(--label-color)消费 - 禁用态背景、必填标红等关键视觉逻辑，不能只靠
::part()控制，否则 Safari/Firefox 用户看到的就是默认样式
::part() 规则，而是组件作者有没有在 shadow 内部节点上打下那个真实的 part="xxx" 属性——这个动作调用方无法绕过，也最容易被当成“理所当然”而忽略。 
