#Vue 中的 scoped 样式是如何实现样式隔离

结论先行：Vue 的 scoped 不是 Shadow DOM。它通过编译期选择器改写 + 运行时为 DOM 打上唯一属性（如 data-v-xxxxxx）来约束样式“只作用于本组件的 DOM 子树”。

#1. 一句话总结

• 每个带 <style scoped> 的单文件组件（SFC）会被分配一个作用域 ID（scopeId）。
• 编译器把你写的选择器改写，在每个简单选择器上追加 [data-v-xxxxxx]。
• 运行时渲染该组件时，会把同一个 data-v-xxxxxx 添加到组件生成的每一个真实 DOM 元素上。
• 因为 CSS 选择器和 DOM 上的属性都“对上号”，所以样式被限定在当前组件，避免互相污染。

#2. 工作原理（编译期 + 运行时）

#2.1 作用域 ID 的产生

• 对于包含 <style scoped> 的 SFC，编译器会为该组件生成一个稳定的 scopeId，常见形如 data-v-123abc。

#2.2 选择器改写（关键）

• 你写的：

  复制/* SFC 内 <style scoped> */
  .btn { padding: 8px 12px; }
  .card .title:hover { opacity: 0.9; }

• 编译后的样子（概念化展示）：

  复制.btn[data-v-123abc] { padding: 8px 12px; }
  .card[data-v-123abc] .title[data-v-123abc]:hover { opacity: 0.9; }

• 规则要点：每个简单选择器（.btn、.card、.title、div、h1、[type=text] 等）都会被追加 [data-v-123abc]。

#2.3 运行时打标（DOM 打补丁）

• 渲染该组件时，运行时会在它产生的每个真实 DOM元素上添加 data-v-123abc 属性。
• 这样，“被改写的 CSS 选择器”只会命中“带相同属性的 DOM 元素”，实现隔离。

小贴士：与 Shadow DOM 不同，这只是 样式层面的隔离。JS 选择器（如 document.querySelector）仍然能跨组件选择 DOM。

#3. 它和 Shadow DOM 的区别

#4. 选择器改写规则详解

#4.1 基础选择器

复制/* 你写的 */
h2, .title, [data-x] {}

/* 编译后（概念化） */
h2[data-v-123abc], .title[data-v-123abc], [data-x][data-v-123abc] {}

#4.2 组合选择器

复制/* 你写的 */
.card .title > span + i {}

/* 编译后（概念化） */
.card[data-v-123abc] .title[data-v-123abc] > span[data-v-123abc] + i[data-v-123abc] {}

#4.3 伪类与伪元素

复制/* 你写的 */
.button:hover::after {}

/* 编译后（概念化） */
.button[data-v-123abc]:hover::after {}

#4.4 @media / @supports

• 规则块本身保留，内部选择器照常追加作用域属性。

#4.5 @keyframes / animation

• 关键帧名称不做作用域改写。建议：关键帧名加前缀或放在 :global 中，避免重名。

#5. 跨子组件/深度选择：deep

样式默认不会透传进子组件的“内部实现”，例如想影响子组件渲染出的 .inner。这时要使用“深度选择”。

• Vue 3 推荐：

  复制/* 在 <style scoped> 中 */
  .wrap :deep(.inner) { margin-top: 8px; }

  编译后要点：:deep() 内部的那部分不附加 [data-v-123abc]，从而可以“穿透”到子组件内部。

• 兼容写法（Vue 2.7 / Vue 3 也支持）：

  复制.wrap ::v-deep .inner { ... }

• 过时写法（老 Vue 2 项目可能见到）：

  复制.wrap >>> .inner { ... }    /* 或者 */
  .wrap /deep/ .inner { ... }

建议统一使用 :deep()（或 ::v-deep）可读性最好。

#6. 作用于插槽内容：:slotted()（Vue 3）

<style scoped> 默认作用不到“传进来的插槽内容”（它由父组件渲染）。若你在子组件内想给“外部传进来的 slot DOM”上样式：

复制/* 子组件的 <style scoped> */
:slotted(.tag) { padding: 2px 6px; border-radius: 4px; }

要点：:slotted(selector) 只选择“作为插槽分发进来的元素”，不会误伤子组件自身 DOM。

在 Vue 2 中没有 :slotted()，需在父组件侧给要传入的元素类名，并在父组件的 scoped 样式里直接写样式，或在子组件用 :deep()。

#7. 显式逃出作用域：:global()

当你希望在 <style scoped> 内写全局选择器（例如 reset、第三方库覆盖点等）：

复制:global(html, body) { height: 100%; }
:global(.n-progress) { pointer-events: none; }

只把 (:global(...)) 的部分视作全局，其余仍然按 scoped 处理。

#8. 与 v-html 的交互（高频坑）

v-html 插入的是原始 HTML，这些 DOM 不会带 data-v-123abc，因此普通 scoped 规则匹配不到内部标签：

复制<div class="content" v-html="html"></div>

复制/* 这个匹配不到 v-html 里的 <p>，因为 <p> 没有 data-v-123abc */
.content p { line-height: 1.8; }

解决：使用 :deep() 放在“内部部分”：

复制/* 让内部 <p> 不追加作用域属性，从而能匹配到动态 HTML */
.content :deep(p) { line-height: 1.8; }

#9. 与预处理器（Less / SCSS / UnoCSS）

• 预处理器先编译（展开嵌套、变量等），再由 Vue 对产出的选择器进行 scoped 改写。

• :deep()、:global()、:slotted() 在 Less/SCSS 中可与嵌套配合：

  复制.wrap {
    :deep(.inner) { margin: 8px; }
    &:hover { opacity: .9; }
  }

#10. CSS Modules vs <style scoped>

何时用哪个？

• 组件内部样式 + 偶尔穿透：scoped 更顺手。
• 大型工程需要类名可编程化、按模块管理：可考虑 CSS Modules。

#11. SSR / SSG 下的行为

• 服务器端渲染会把 data-v-xxxxxx 直接输出到 HTML，客户端 hydration 会复用同一套 scopeId，样式规则一致生效。
• 若做 Critical CSS 抽取，务必确保抽取后的 CSS 仍是改写后的选择器并与 HTML 中的 data-v-xxxxxx 对应。

#12. 性能与可维护性

• 保持选择器简单（尽量少用层级过深的后代选择器）。
• 优先用变量/约定减少 :deep() 的使用频率，例如：
  • 在父组件根节点挂CSS 变量，子组件内部用 var(--x) 读取，减少强耦合。
• 对第三方组件库样式覆盖，建议：
  1. 能用主题变量就别用 :deep()；
  2. 必要时在外层容器加命名空间类，配合 :deep() 精准选择。

#13. 常见坑 & 排查清单

• 选择器不生效？ 检查：目标元素是否真的带有 相同的 data-v-xxxxxx；若是子组件内部或 v-html 内容，请使用 :deep()。
• 全局样式意外被“局部化”？ 检查是否应使用 :global()。
• 动画名冲突？ @keyframes 不做作用域改写，给关键帧加前缀或放入 :global。
• 插槽样式无效？ 在子组件内需要 :slotted()（Vue 3）。
• Less/SCSS 嵌套后选择器怪异？ 先在浏览器 DevTools 看最终 CSS，确认是否被正确追加了 [data-v-xxxxxx]。

#14. 实战示例对照

#14.1 基础隔离

复制<template>
  <button class="btn">OK</button>
</template>

<style scoped>
.btn { background: #0ea5e9; color: #fff; }
</style>

效果：等价于 .btn[data-v-xxxxxx] { ... }，只命中本组件按钮。

#14.2 穿透子组件内部

复制<!-- Parent.vue -->
<template>
  <Child class="wrap" />
</template>

<style scoped>
.wrap :deep(.child-inner) { padding: 8px; }
</style>

#14.3 作用到插槽（Vue 3）

复制<!-- TagList.vue -->
<template>
  <slot />
</template>

<style scoped>
:slotted(.tag) { border: 1px solid #999; padding: 2px 6px; }
</style>

#14.4 配合 v-html

复制<template>
  <div class="content" v-html="html"></div>
</template>

<style scoped>
.content :deep(h1) { font-size: 20px; margin: 12px 0; }
</style>

#15. 速查（Cheat Sheet）

• 局部化：<style scoped> → 选择器自动追加 [data-v-xxxxxx]。
• 穿透子组件：:deep(.x) / ::v-deep .x（Vue 2 老项目：>>>、/deep/）。
• 作用于插槽（Vue 3）：:slotted(.x)。
• 声明全局：:global(.x)。
• v-html 内容：使用 .box :deep(p)。
• 关键帧：@keyframes 不会被作用域化，注意命名或用 :global。
• 不是 Shadow DOM：仅样式层面的隔离，JS 仍可跨组件选 DOM。

#16. 推荐实践

1. 用 CSS 变量在父容器传“主题/尺寸”，减少 :deep() 粘连：

   复制/* 父 */
   .panel { --gap: 8px; }
   /* 子 */
   .grid { gap: var(--gap); }

2. 对第三方库优先用主题 API；必要时加命名空间类 + :deep() 精选覆盖面。

3. 保持选择器浅、命名清晰，把“跨组件样式”集中到少数“桥接”文件维护。