::part() 未生效是因为它只匹配组件内显式标注 part 属性的元素，且不支持链式选择、大小写敏感、不能在 shadow 内自用；必须由组件作者主动暴露 part，且需注意浏览器兼容性与 closed shadow root 的限制。
::part() 为什么写对了却没生效
因为 ::part() 不是“穿透选择器”，它只匹配组件内部显式带 part="xxx" 属性的元素。外部 CSS 写 my-button::part(label)，但组件 shadow 内部的 没加 part="label"，样式就完全不会应用——浏览器连警告都不会抛，静默失败。
常见错误现象：
-
::part(icon)写对了，但组件里用的是part="icon-slot"，大小写或拼写不一致 → 失效 - 试图链式选择：
my-input::part(wrapper) input或my-input::part(label)::before→ 语法非法，::part()后不能接其他选择器 - 在同一个 shadow tree 内自用：
:host::part(label)→ 无效，::part()只能在宿主（light DOM）或父级 shadow 中使用
必须由组件作者在 shadow 内标记 part 属性
这个动作无法由使用者绕过。你作为调用方，只能依赖组件是否暴露了你需要定制的部分。比如一个按钮组件想支持外部改图标颜色，它得这么写：
<template id="my-button"><button>
<slot name="icon"></slot><slot></slot></button>
<style>
/* 这里不能靠外部选中 slot 内容，得暴露 part */
::slotted([slot="icon"]) { display: inline-flex; }
</style></template>
但如果它想让你能改内部 loader 的旋转颜色，就必须主动加属性：
<div part="loader" class="spinner"></div>
否则你写 my-button::part(loader) 就是白费力气。没有第四个办法——!important、全局 class、 放 全部无效。
浏览器兼容性与渐进增强必须做
::part() 在 Chrome 97+、Edge 97+ 原生可用；Safari 自 15.4 起支持，但需手动开启实验性功能（about:config 或开发者菜单）；Firefox 截至 2026 年中仍不支持。
这意味着：如果你的组件要跑在教育系统、企业内网或 macOS 旧版本上，::part() 很可能直接不工作。
安全做法是用 @supports 做降级：
@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 用户看到的就是默认灰扑扑的 fallback 样式。
真正能穿透 Shadow DOM 的只有三种方式
除了 ::part()，另外两个是：:host（只管最外层宿主元素）和 CSS 自定义属性（--my-comp-bg）。三者地位平等，没有优先级高低，也没有“更高级”的穿透手段。
有人试过用 JS 动态注入样式表到 shadowRoot，比如：
const style = document.createElement('style');
style.textContent = 'div { color: blue; }';
shadowRoot.adoptedStyleSheets = [new CSSStyleSheet()];
shadowRoot.adoptedStyleSheets[0].replace(style.textContent);
这确实可行，但它属于组件实现侧的控制权，不是使用者能触发的。你作为调用方，唯一可控的出口就是组件作者是否开放了 part、:host 条件或 CSS 变量。
最容易被忽略的一点：组件内部用了 mode: "closed" 创建 shadow root，那连 :host 都不可用——::part() 更不可能生效。确认组件文档是否明确写了 mode: "open"，否则所有外部样式方案都归零。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
