Vue 3 scoped CSS原理与属性选择器解析

Vue 3 的 scoped CSS 并非魔法般的样式锁定，而是一种构建期的“属性选择器隔离”机制：通过编译时为组件元素自动添加唯一的 `data-v-xxx` 属性，并将所有样式选择器重写为 `.class[data-v-xxx]` 形式来实现作用域控制；它高度依赖构建工具（如 Vite + `@vitejs/plugin-vue`），在 CDN 直引、动态 DOM 操作、SSR 配置缺失、`@import` 外部 CSS、运行时绑定的动态类名或插槽内容等场景下天然失效；同时需谨慎理解 `:deep()` 仅解除目标选择器自身的作用域限制、`:slotted()` 仅作用于插槽直接子节点、父子组件嵌套时根元素可能携带多个 `data-v-xxx` 属性等关键边界行为——掌握这些原理，才能真正用好 scoped，避免样式泄漏与意外失效。

Scoped CSS 在 Vue 3 中不是“锁定”样式，而是通过属性选择器实现作用域隔离——它不阻止你写错选择器，也不拦截运行时动态插入的 DOM；它只在编译期给元素加 data-v-xxxx 属性，并重写 CSS 规则匹配该属性。

scoped 是怎么把 class 变成 .class[data-v-xxxx] 的

Vue 3 的 @vue/compiler-sfc 模块在解析