<style scoped>通过编译时为元素添加唯一属性（如data-v-f3f42f0a）并重写CSS选择器实现样式隔离；第三方组件、v-html内容不自动带该属性；需用:deep()穿透子组件、:global()声明全局样式、:slotted()作用于插槽内容。
Vue3 SFC 中 <style scoped> 的作用机制
它不是简单地给元素加个 class 前缀，而是通过 Vue 编译器在构建时为模板中每个元素自动添加一个唯一属性（如 data-v-f3f42f0a），同时把 CSS 选择器也加上对应属性，实现样式隔离。这意味着：只有当前组件的根节点和子节点会被打上该属性，第三方组件或 v-html 插入的内容不会自动带上。
哪些选择器能生效，哪些会意外失效
scoped 对深层嵌套、动态类名、插槽内容的处理容易出问题，不是所有写法都如预期工作：
-
.btn { color: red; }✅ 正常作用于本组件内带class="btn"的元素 -
div .btn✅ 可以匹配子元素，但前提是div和.btn都在当前组件模板内 -
::v-deep(.el-input)✅ 必须用这个伪类穿透作用于子组件（如 Element Plus 组件）内部，注意 Vue 3 中推荐写法是:deep(.el-input) -
:global(.reset-style)✅ 用于声明全局样式，不参与 scoped 处理 -
.parent /deep/ .child❌ 已废弃，不推荐，且在 Vite + Vue 3 中可能完全无效
Vite 环境下 <style scoped> 的常见坑
开发时看着正常，打包后样式错乱？多半是构建阶段的处理差异导致：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 使用
@import引入外部 CSS 文件时，@import后的内容默认不被 scoped，需显式加:global或改用<style>单独引入 - 如果用了
css-loader的modules: true配置（比如在 vite.config.ts 里手动配了），会和scoped冲突，导致属性选择器重复或丢失 - SSR 场景下，服务端渲染时若未正确注入 scoped 属性，客户端 hydrate 会因 DOM 不匹配报 warning，建议配合
defineOptions({ style: 'scoped' })显式声明（虽非必需，但更可控）
需要穿透样式时，:deep() 和 :global() 怎么选
关键看作用域边界：
立即学习“前端免费学习笔记（深入）”；
- 想只影响当前组件树下的某个子组件内部结构（比如改
<el-table>表头颜色），用:deep(.el-table__header) - 想让某段样式彻底脱离组件作用域、像全局 CSS 一样生效（比如重置第三方 UI 库的 base 样式），用
:global() { ... }，且必须写在<style scoped>块内才有效 -
:slotted(.custom)仅用于作用于父组件传入的<slot>内容中的指定 class，对具名插槽也适用，但不能穿透到插槽内容内部的子组件
scoped 不是银弹，尤其在封装可复用组件时，过度依赖 :deep() 会让样式耦合变强；真正需要暴露定制点的地方，建议用 CSS 自定义属性（--my-comp-color）配合 :export 或 props 控制更稳妥。
