::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() 是单点锚定伪元素，不是选择器链起点。它后面不能接任何其他选择器，也不支持伪元素、属性选择器或关系选择器。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• ❌ 非法：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></editor-toolbar>），外部 ::part(toolbar) 默认无法穿透到它的 shadow 内部——必须由外层组件通过 exportparts 显式透传。

• exportparts 必须写在宿主元素标签上，例如：<my-editor exportparts="toolbar:inner-toolbar"></my-editor>
• 然后外部才能写：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" 属性——这个动作调用方无法绕过，也最容易被当成“理所当然”而忽略。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！