::part()不能引入CSS，它只是让已加载的外部CSS作用于Shadow DOM内带part属性的节点；真正加载CSS需用adoptedStyleSheets等机制，二者必须分离处理。
::part() 本身不引入外部 CSS，也不“穿透”去加载样式——它只是让已存在的外部 CSS 能作用到 Shadow DOM 内部特定节点上。真正引入外部 CSS 是另一件事，和 ::part() 毫无关系。
为什么::part()不能用来引入 CSS
::part() 是一个伪元素选择器，不是加载机制。它只在浏览器解析 CSS 规则时起作用：当外部样式表里写了 my-input::part(label) { color: blue; }，且组件 shadow tree 中恰好有节点带 part="label"，样式才生效。它不触发网络请求、不读文件、不拼字符串。
常见误解：@import 或 <link rel="stylesheet"> 放进 shadowRoot 里，再配合 ::part() —— 这种组合毫无意义，@import 会阻塞渲染且路径极易 404，而 ::part() 根本不参与资源加载流程。
正确做法：分两步走，且必须分开处理
第一步是把外部 CSS 加载进 shadowRoot；第二步才是用 ::part() 选中内部节点并应用样式。这两步独立、不可互换、不能合并。
立即学习“前端免费学习笔记（深入）”；
- 加载 CSS 推荐用
adoptedStyleSheets+CSSStyleSheet.replaceSync()（Chrome 73+、Firefox 94+、Safari 17.4+ 可靠） - 降级方案：fetch CSS 文本后注入
shadowRoot.innerHTML，但必须加守卫防止重复插入 -
::part()的规则要写在**外部样式表或<style>标签里**，不能写在 shadow 内部的<style>中（否则作用域不对） - 确保组件内部真实存在
part="xxx"属性，大小写严格匹配，且该节点在 shadow tree 中（不在<slot>分发内容里）
adoptedStyleSheets + ::part() 实操要点
这是目前最可控、可维护的组合方式，但 Safari 15.4–17.3 存在 replaceSync() 抛错、CSS 变量不刷新等问题，务必真机测试 iOS 16.7 / macOS 12.6 + Safari。
- JS 中创建样式表：
const sheet = new CSSStyleSheet(); - 立即注入规则：
sheet.replaceSync('button { cursor: default; }');（注意：不用insertRule，它在 Safari 旧版中失效） - 挂载到 shadowRoot：
shadowRoot.adoptedStyleSheets = [sheet];（必须是数组，且不能用link.sheet） - 外部 CSS 写
my-button::part(action-btn) { background: #007bff; }，前提是组件内按钮有part="action-btn" - 不要试图用
@supports selector(::part(foo))来包裹adoptedStyleSheets注入逻辑——@supports判断的是 CSS 解析能力，和 JS API 是否可用无关
最容易被忽略的兼容性现实
Firefox 截至 2026 年 5 月仍未实现 ::part()，@supports selector(::part(foo)) 永远返回 false；Safari 15.4–16.3 对 adoptedStyleSheets 的支持极不稳定，replaceSync() 可能静默失败。这意味着：你写的 my-input::part(label) 在 Firefox 里根本不会计算，在旧 Safari 里可能样式全丢，且控制台不报错、DevTools 不提示、用户只看到“样式没变”。
