::part()没反应是因为它只匹配shadow DOM内显式声明part属性的节点，若组件未设part="xxx"、大小写/拼写不一致、链式选择或在shadow内自用均会失效，且仅支持外部样式，需组件作者主动暴露并配合exportparts透传嵌套部件。
::part() 为什么写了却没反应
因为 ::part() 不是穿透开关，它只匹配组件 shadow DOM 内部**显式带 part="xxx" 属性的节点**。你在外部写 my-input::part(label)，但组件内部根本没节点带 part="label"，样式就完全不应用——浏览器静默失败，连控制台警告都没有。
常见错误现象：
-
::part(icon)写对了，但组件里用的是part="icon-slot"或part="Icon"（大小写/拼写不一致）→ 失效 - 试图链式选择：
my-editor::part(toolbar) button或my-input::part(wrapper)::before→ 语法非法，::part()后不能接其他选择器 - 在 shadow 内部自用：
::host::part(label)→ 无效，::part()只能在宿主（light DOM）或父级 shadow 中使用
必须由组件作者在 shadow 内真实节点上加 part 属性
这个动作调用方无法绕过。你作为使用者，只能依赖组件是否暴露了你要定制的部分。比如想改工具栏按钮颜色，组件内部得这样写：
<div part="toolbar"> <button part="bold-btn"></button> <button part="italic-btn"></button> </div> <div part="status-bar">Ready</div>
注意：
立即学习“前端免费学习笔记（深入）”；
-
part值必须是静态字符串，不支持part={this.state.type}这类动态绑定 - 不能写在
<slot>上，也不能写在 slot 分发进来的外部内容上（那是::slotted()的事） - 同一节点可声明多个 part，用空格分隔：
part="label required error"，外部可用::part(required)单独选中 - 若组件含嵌套 Shadow DOM（如
<editor-toolbar>是独立自定义元素），需配合exportparts逐层透传
浏览器兼容性现实和渐进增强必须做
::part() 在 Chrome 97+、Edge 97+ 原生支持；Safari 自 15.4 起支持，但需手动开启实验性功能（about:config 或开发者菜单）；Firefox 截至 2026 年 6 月仍不支持——@supports selector(::part(foo)) 永远返回 false。
真机测试底线：
- iOS 16.7 + Safari
- macOS 12.6 + Safari
降级建议：
@supports selector(::part(foo)) {
my-component::part(foo) { color: red; }
}
@supports not selector(::part(foo)) {
my-component { --foo-color: red; }
/* 组件内部用 var(--foo-color) 回退 */
}别把禁用态背景、必填标红等关键视觉逻辑强绑在 ::part() 上，否则 Safari 用户看到的就是未降级的默认样式。
为什么 !important、全局 class、<style> 全部失效
Shadow DOM 的样式隔离是硬边界，不是优先级问题。外部选择器根本进不去 shadow tree，!important 连参与层叠的机会都没有。
典型无效写法：
-
my-input div { color: red !important; }—— 完全不匹配，连计算都不触发 -
<my-input class="theme-dark"></my-input>，然后写.theme-dark ::part(label) { color: white; }——class在 host 上，::part()只认内部part属性 -
<style>标签无论放<head>还是组件外任意位置，对 shadow tree 内部零影响
真正能绕过隔离的只有三种方式：::host、::part()、CSS 自定义属性（--my-component-color）。没有第四个。
真正容易被忽略的是：part 名称一旦公开，就是组件的 API。改名=破坏性变更，必须同步文档、版本号和迁移指南；而很多人只在本地 demo 里试通。
