::part()需组件内部显式添加part属性才能生效，仅作用于带part标记的shadow dom节点，不支持链式选择或复杂伪类，且大小写敏感；而::slotted()用于样式化slot投射内容。
为什么::part()在Shadow DOM里没生效
因为::part()不是万能穿透器，它只对显式用part属性标记的元素起作用。Shadow DOM默认是样式隔离的，没打part="xxx"的内部节点，外部CSS根本“看不见”——不是浏览器bug，是设计如此。
常见错误现象：::part(button)写对了，但组件内部<button></button>没加part="button"，结果样式完全不应用；或者用了part="btn"，但CSS里写成::part(button)，大小写或拼写不一致也失效。
- 必须由组件作者主动暴露：在自定义元素内部的HTML中，给目标子节点加上
part="xxx"属性 -
::part()只能用于:host外部（即light DOM或父级shadow DOM），不能在同一个shadow tree内自用 - 不支持链式选择：
::part(icon)::before非法；只能::part(icon)单独设置，伪元素需在组件内部定义
::part()和::slotted()的区别在哪
::slotted()匹配的是被<slot></slot>投射进来的外部内容，而::part()匹配的是组件自己shadow tree里的、带part属性的原生节点。两者作用域和时机完全不同。
使用场景举例：你用<my-button><span slot="icon">★</span></my-button>，想改那个★的颜色——该用::slotted([slot="icon"])；但你想改按钮内部的<span part="loader"></span>的旋转动画，才轮到::part(loader)。
-
::slotted()样式由宿主（调用方）写，但实际渲染在组件shadow内；::part()样式也由宿主写，但目标是组件自己声明的可定制部位 -
::slotted()能穿透一层slot分发，但无法选中slot内部再套一层的子元素（除非那层也slot了） - 兼容性上，
::part()在Chrome 97+、Edge 97+、Safari 16.4+可用；::slotted()支持更早（Chrome 53+）
如何配合:host()做条件化样式穿透
单靠::part()只能改样式，没法根据状态切换；真正灵活的定制得结合:host()的参数函数，比如:host([disabled]) ::part(button)。
性能影响很小——浏览器只在:host状态变化时重新计算这部分规则，不是实时监听所有属性。但要注意：只有observedAttributes里声明的属性变更才会触发:host()重匹配（Web Components v1标准下）。
- 推荐把常用状态都暴露为属性：
disabled、size、variant，并在static get observedAttributes()里列出来 - 避免在
:host(.class) ::part(x)中依赖外部class——light DOM的class变动不会触发shadow内样式更新 - Safari对
:host([attr]) ::part(x)的支持比:host(:hover) ::part(x)更稳，后者有偶发延迟
遇到Invalid CSS selector报错怎么办
这个错误几乎全是语法越界导致的。DevTools里看到Invalid CSS selector并定位到::part()行，基本可以确定是写了浏览器不认的组合。
典型非法写法：::part(item):not(:first-child)（伪类嵌套不支持）、my-component::part(list) > li（后代选择器跨shadow boundary无效）、::part("item")（引号多余）。
- 只允许
::part(x)单独出现，或前面紧接:host()、:host-context() - 不能和
:nth-child()、:has()等复杂伪类连用（目前所有浏览器都不支持） - 部分构建工具（如旧版PostCSS插件）会误删
::part()，检查打包后CSS是否还存在该片段
最易被忽略的一点：part属性值是大小写敏感的，且不自动标准化空格——part="primary btn"暴露的是两个独立part：primary和btn，不是primary-btn。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
