::part()必须配合组件内部显式声明的part属性才能生效，仅当元素带有对应part="xxx"时外部样式才匹配，不支持链式选择、大小写敏感、不能穿透未标记节点或多层Shadow DOM。
::part() 选择器必须配合 part 属性才生效
外部 CSS 写 my-button::part(label) 却没效果？大概率是组件内部根本没加 part="label"。Shadow DOM 的封装性不会因为写了 ::part() 就自动开放——它只匹配那些被显式标记为可定制的节点。
常见错误现象：直接在宿主元素上写 class="btn--large"，指望它影响 Shadow 内部的按钮；或者组件作者没暴露任何 part，使用者却硬写 my-input::part(input)，结果样式完全不应用。
- 组件作者必须在 Shadow DOM 内部的对应元素上设置
part属性，例如：或 -
part值只能是合法标识符（不能含空格、连字符开头等），且一个元素可有多个part，用空格分隔：part="field error" - 外部选择器只能用
::part(…)，不能混用类名或 ID：my-input::part(field).invalid是无效的，::part(field)本身已是一个伪元素，不能再加类限定
::part() 不支持嵌套选择器，也不能穿透多层 Shadow
你不能写 my-card::part(header) p 去选中 header 内部的段落——::part() 只匹配带指定 part 属性的那个元素自身，不提供后代关系。
如果组件内部还有子组件（比如 input，那必须由最内层组件自己暴露 part，外层组件无法代理或转发。
-
::part(foo) > span会匹配span，但这是靠浏览器对::part()返回的元素做后续选择，不是“穿透” - 多层 Shadow 场景下，
outer-comp::part(inner) input无效；必须是inner-comp::part(field)，且inner-comp独立注册并暴露了part - Chrome 102+、Firefox 115+、Safari 17.4+ 支持，Edge 同 Chrome；旧版 Safari（≤16.6）和部分安卓 WebView 完全不识别
::part()
替代方案比 ::part() 更常用，尤其要兼容老浏览器时
如果你控制不了组件源码（比如用的是第三方 Web Component），或者目标环境包含大量旧版 Safari，::part() 基本不可靠，得换路子。
- 优先用 CSS 自定义属性：
--button-bg、--text-color等传入 Shadow，内部用var(--button-bg)消费——它天然穿透 Shadow 边界，兼容性极好 - 用
@import在 Shadow Root 内加载外部 CSS 文件，例如：，但注意首次渲染会有 FOUC 风险 - 通过属性传样式字符串：
，灵活但易 XSS，需 sanitize - 避免用 JS 动态注入
到 Shadow Root——每次更新都要重写整个 style 标签，性能差且难维护
浏览器 DevTools 里怎么确认 ::part() 是否起作用
打开 Elements 面板，找到宿主元素（如 #shadow-root，再看目标元素是否真有 part="xxx" 属性。接着切到 Styles 面板，搜索 ::part(xxx) 规则，看是否出现在“Matched CSS Rules”里。
- 如果规则显示灰色、带删除线，说明未匹配到任何元素——要么
part拼错，要么该元素不在 open 模式 Shadow 中 - 如果规则生效但样式没体现，检查是否被更高权重的选择器覆盖（比如内联
style或!important） - Shadow DOM 内部的
:host、:host-context()等伪类优先级高于::part()，冲突时后者会被压
真正麻烦的从来不是写对 ::part() 语法，而是得说服组件作者暴露合适的 part，还得确保所有目标环境都支持——很多时候，CSS 变量才是更稳的落地选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
