::part()失效是因为组件内部未显式添加对应part属性，且仅在open shadow root中有效、不支持链式选择和closed模式。
为什么::part()写对了却没生效
因为::part()只匹配 Shadow DOM 内部显式带 part="xxx" 属性的元素，不匹配类名、标签名或 slot 内容。外部写 my-button::part(icon)，但组件内部是 <slot name="icon"></slot> 或 <i class="icon"></i>，没加 part="icon"，样式就完全不会应用——浏览器静默忽略，连警告都没有。
常见失效原因包括：
- 拼写/大小写不一致：外部用
icon，内部写的是part="Icon"或part="icon-slot" - 试图链式选择：
my-input::part(wrapper) input或my-button::part(label)::before—— 语法非法，::part()后不能接其他选择器 - 在 shadow 内自用：
::host::part(label)无效，::part()只能在 light DOM 或父级 shadow 中使用 - 用了
mode: "closed"的 shadow root ——::part()不起作用
必须由组件作者主动暴露 part 属性
这个动作无法由使用者绕过。你作为调用方，只能依赖组件是否暴露了你要定制的部分。比如一个加载按钮想支持外部改 loader 颜色，它得这样写：
<div part="loader" class="spinner"></div>
否则你写 my-button::part(loader) 就是白费力气。没有第四个办法——!important、全局 class、<style> 放 <head> 全部无效。
立即学习“前端免费学习笔记（深入）”；
暴露时要注意：
-
part值应语义清晰、稳定，避免用临时类名如uk-button（框架类名可能变） - 不要暴露过多部分，只暴露真正需要被定制的节点（如
root、label、icon、input） - 若需支持 BEM 风格的外部控制，可暴露
part="button"和part="button--large"，但后者需组件逻辑配合响应
::part() 的浏览器兼容性现实
::part() 在 Chrome 97+、Edge 97+ 原生可用；Safari 自 15.4 起支持，但 macOS 旧版本（如 Monterey 12.6）需手动开启实验性功能；Firefox 截至 2026 年中仍不支持。
这意味着：
- 教育系统、政务内网、银行终端等环境大概率不工作
- 不能单独依赖
::part()做主题切换，必须搭配降级方案（如 CSS 自定义属性 +var(--color)） - 构建时建议用
postcss-selector-not或caniuse-lite检查并自动添加回退规则
和 var()、::slotted() 怎么选
::part() 解决「精准控制内部某节点样式」，var() 解决「传递设计 token（颜色、间距、圆角）」，::slotted() 解决「定制传入的 slot 内容样式」——三者不是替代关系，是协作关系。
典型组合用法：
- 用
var(--button-bg)控制背景色，靠 JS 动态改:root或宿主元素上的变量 - 用
::slotted([slot="icon"])统一设置所有插槽图标的尺寸和垂直对齐 - 用
my-button::part(root)让外部能覆盖整个按钮的 display、border-radius 等容器级样式
最容易被忽略的一点：即使用了 ::part()，也得确保对应元素在 shadow 内真实存在且未被 JS 移除或替换——比如条件渲染中 part="loader" 的节点只在 loading 状态下插入，那非 loading 时 ::part(loader) 就永远不生效。
