Vue的scoped样式是编译期静态隔离机制，通过为元素添加data-v-xxx属性并重写CSS为.class[data-v-xxx]实现作用域限定，不作用于v-html、Teleport挂载内容及子组件内部节点。

Vue 的 scoped 样式不是靠运行时控制，而是编译阶段完成的静态隔离。它不改变 CSS 本身的作用规则，而是通过“属性选择器 + 唯一标识”让样式只匹配当前组件内的元素。

编译时自动添加 data-v-xxx 属性

当组件使用 <style scoped>，Vue 编译器（vue-loader + postcss-selector-scope）会为该组件模板中**所有普通元素节点**添加一个唯一的 data-v-xxxxxx 属性（哈希值由组件内容生成）。这个属性不会出现在根组件的 <template> 源码里，是构建时注入的。

• 即使你写了 <div class="box"></div>，实际渲染出的 DOM 是 <div class="box" data-v-f3f3eg9></div>
• 动态插入的元素（如 v-html 渲染的内容）不会被自动加上该属性，因此 scoped 样式对其无效
• 子组件的根元素会同时拥有自己的 data-v-yyy 和父组件的 data-v-xxx（用于深度穿透场景）

CSS 选择器被重写为属性组合

对应地，<style scoped> 中的每条 CSS 规则都会被重写：在原选择器末尾追加 [data-v-xxxxxx]，提升特异性并限定作用范围。

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

• .btn { color: blue; } → .btn[data-v-f3f3eg9] { color: blue; }
• button:hover { opacity: 0.8; } → button[data-v-f3f3eg9]:hover { opacity: 0.8; }
• div p span { font-weight: bold; } → div[data-v-f3f3eg9] p[data-v-f3f3eg9] span[data-v-f3f3eg9] { font-weight: bold; }

穿透与例外：如何影响子组件或全局

scoped 并非完全封闭。Vue 提供了明确的“出口”，用于有节制地突破限制：

立即学习“前端免费学习笔记（深入）”；

• :deep(.child)（Vue 3）或 ::v-deep .child（Vue 2）→ 编译为 [data-v-parent] .child，可影响子组件内匹配的元素
• :global(.reset) → 保留原始选择器，生成 .reset，作用于全局
• 没有 scoped 的 <style> 块，或 <style lang="scss"> 中未加 scoped，全部按全局处理

它不能解决什么

scoped 解决的是“选择器污染”，不是“样式继承”或“DOM 结构泄漏”：

• 父组件设置 font-size: 14px，子组件仍会继承——这是 CSS 继承机制，与 scoped 无关
• 第三方组件若用 !important 或行内 style，scoped 无法覆盖，需配合 :deep() 或全局样式
• 同名类在不同组件中生成不同 data-v 属性，所以不会冲突；但若手动给元素加多个 data-v 属性，浏览器仍会按 CSS 特异性规则计算，不保证预期效果