::part()不生效是因为三个硬性条件缺一不可：shadow dom内必须有静态part="label"属性的节点；该节点须在shadow内部而非slot投影内容中；外部选择器必须严格匹配大小写，如my-input::part(label)。
为什么::part()完全不生效
根本不是浏览器 bug，而是三个硬性条件缺一不可：组件 shadow tree 内必须有真实节点带静态 part="label" 属性；该节点不能是 <slot></slot> 或投影进来的内容；外部选择器必须写成 my-input::part(label)，大小写严格一致。
常见失效场景包括：
-
<my-input></my-input>宿主元素自己写了part="label"——::part()只匹配 shadow 内部子节点，宿主自身无效 - 把
part="label"写在<slot name="label"></slot>上 —— 这是::slotted()的职责范围，::part()对它完全无视 - 用 JS 动态设置
el.setAttribute('part', 'label')——part必须是 HTML 字符串中静态声明的属性，运行时添加不触发样式重计算 - 拼写错误，比如
part="Label"与::part(label)大小写不匹配 —— 匹配区分大小写，静默失败
part 和 exportparts 到底谁管谁
part 是节点上的标记，exportparts 是自定义元素的“出口开关”。没开这个开关，::part() 在外部永远选不到内部节点——哪怕 part="icon" 写得再对也没用。
正确做法是：
- 在自定义元素定义时，显式声明
exportparts="icon:main-icon label:form-label" - 外部必须按导出后的别名写选择器：
my-button::part(main-icon)，而不是原始名::part(icon) -
exportparts不支持通配符或动态值，只能是空格分隔的内部名:对外名映射对 - 如果组件没写
exportparts，哪怕 shadow 内所有节点都带part，外部::part()也一律失效
Safari 和 Firefox 中 ::part() 的真实兼容性底线
别信 CanIUse 上的“支持”绿标。真机测试发现：
- iOS 16.7 + Safari、macOS 12.6 + Safari 是当前企业内网能接受的最低门槛；更早版本（如 macOS 12.4 + Safari 15.3）直接不解析
::part()规则，连@supports selector(::part(foo))都返回false - Firefox 截至 2026 年 5 月仍未实现，
@supports selector(::part(foo))永远为false，且无明确排期 - Safari 需用户手动开启
about:config中的 Experimental Web Platform Features 才能启用，生产环境不可依赖 - Chrome/Edge 97+ 稳定支持，但大量企业用户仍卡在旧版 Chromium 内核（如某些国产办公套件内置浏览器）
如何安全 fallback 到 CSS 自定义属性
::part() 只能当渐进增强层，核心视觉必须靠 var(--my-comp-label-color, #333) 支撑。关键点在于变量注入位置和 fallback 逻辑：
- 变量必须设在宿主元素上：
<my-input style="--my-input-label-color: #1e1e1e;"></my-input> - shadow 内消费时必须带 fallback：
color: var(--my-input-label-color, #333);—— 缺少 fallback 会导致旧浏览器渲染为color: initial - 禁止在 shadow 内写
:host { --my-input-label-color: blue; }试图“反向暴露”，这只会作用于宿主自身，不向外传递 - 用
@supports not selector(::part(foo))包裹降级规则，而不是只靠@supports正向检测，避免漏掉 Firefox 这类永远不支持的环境
真正容易被忽略的是：一旦把 part="header" 暴露出去，它就等同于组件的公开 API。改名、删掉、语义变更，都会导致第三方使用者样式断裂——而这类变更往往只在本地 demo 里验证过，上线后才暴露问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
