::part()没反应是因为只匹配shadow dom内显式声明part="label"的元素，大小写敏感、不支持链式选择或slot内容，且firefox至今未实现，须用@supports降级为css自定义属性。
::part() 为什么写了却完全没反应
因为浏览器根本没看到目标节点——::part(label) 只匹配 shadow DOM 内部真实存在 part="label" 属性的元素，不是 class、不是 data 属性、不是 slot 名，更不是靠猜出来的语义名。它不报错、不警告，就静默跳过。
- 检查方式：用 DevTools 打开组件，右键 → “Inspect” 进入 shadow root，手动搜索
part="label"（注意大小写严格匹配） -
part="Label"和::part(label)不匹配；part="label required"可被::part(required)单独选中 元素上加 part无效——slot 本身不渲染，它只是内容占位符；想样式化投射进来的内容，该用::slotted()- 宿主元素（比如
<my-input></my-input>标签本身）不能加part，::part()只作用于 shadow 内部子节点
::part() 的语法限制和常见误用
::part() 是个“单点锚定”伪元素，不是选择器链起点。它后面不能再接其他选择器，也不能在同一个 shadow tree 内自用。
- 非法写法：
my-input::part(wrapper) input、my-input::part(label)::before、:host::part(label) - 合法写法只有：
my-input::part(label)，所有样式必须直接定义在这个伪元素上 - 伪元素（如
::before）、属性选择器（如[disabled]）、关系选择器（>、+）都不能跟在::part()后面 - 动态绑定无效：
part={this.state.type}或:attr(part)都不生效；part必须是静态字符串属性
浏览器兼容性与降级必须做
Chrome/Edge 97+ 原生支持，但 Safari 和 Firefox 的现实很骨感：Safari 自 15.4 起需手动开启实验功能，Firefox 截至 2026 年 6 月仍未实现 ::part()，@supports selector(::part(foo)) 永远返回 false。
- 真机测试底线：iOS 16.7 + Safari、macOS 12.6 + Safari；别信 CanIUse 的“支持”标记就上线
- 必须用
@supports包裹关键样式，fallback 到 CSS 自定义属性：--my-input-label-color - 组件内部要用
var(--my-input-label-color)消费该变量，否则降级失效 - 禁用态背景、必填标红这类关键视觉逻辑，不能只靠
::part()控制，否则 Safari 用户看到的就是默认样式
嵌套 Shadow DOM 中的 exportparts 是刚需
如果组件结构含子自定义元素（如 <editor-toolbar></editor-toolbar>），且你想从最外层定制它的内部部件，仅靠父组件写 part="toolbar" 不够——必须用 exportparts 显式透传。
- 父组件需声明：
<editor-toolbar exportparts="button bold-btn italic-btn"></editor-toolbar> - 外部才能写：
my-editor::part(bold-btn) { color: blue; } -
exportparts是白名单机制，没列进来的 part 值，外层 CSS 看不见 - 多层嵌套时，每层都得配
exportparts，漏一层就断链
part="icon" 写进组件并交付使用，这个字符串就成了公开 API。改名=破坏性变更，必须同步文档、版本号和迁移指南——而很多人只在本地 demo 里试通，上线后才发现第三方用户样式全崩。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
