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 选择器改写（关键）

你写的：

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

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

 1.btn[data-v-123abc] { padding: 8px 12px; }
 2.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 的区别

对比项	Vue `scoped`	Shadow DOM
隔离方式	选择器改写 + DOM 加属性	浏览器原生的样式/DOM 隔离边界
JS 访问	不隔离，普通选择器可达	Shadow Root 隔离，需要特殊 API
继承与变量	正常的 CSS 继承/变量	Shadow 边界内外继承需额外设计（CSS parts、vars 等）
兼容性	纯 CSS/属性，兼容老浏览器	取决于 Shadow DOM 支持

4. 选择器改写规则详解

4.1 基础选择器

 1/* 你写的 */
 2h2, .title, [data-x] {}
 3
 4/* 编译后（概念化） */
 5h2[data-v-123abc], .title[data-v-123abc], [data-x][data-v-123abc] {}

4.2 组合选择器

 1/* 你写的 */
 2.card .title > span + i {}
 3
 4/* 编译后（概念化） */
 5.card[data-v-123abc] .title[data-v-123abc] > span[data-v-123abc] + i[data-v-123abc] {}

4.3 伪类与伪元素

 1/* 你写的 */
 2.button:hover::after {}
 3
 4/* 编译后（概念化） */
 5.button[data-v-123abc]:hover::after {}

4.4 `@media` / `@supports`

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

4.5 `@keyframes` / `animation`

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

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

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

Vue 3 推荐：
```
 1/* 在 <style scoped> 中 */
 2.wrap :deep(.inner) { margin-top: 8px; }
```
编译后要点：:deep() 内部的那部分不附加 [data-v-123abc]，从而可以“穿透”到子组件内部。
兼容写法（Vue 2.7 / Vue 3 也支持）：
```
 1.wrap ::v-deep .inner { ... }
```

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

 1.wrap >>> .inner { ... }    /* 或者 */
 2.wrap /deep/ .inner { ... }

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

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

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

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

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

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

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

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

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

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

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

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

 1<div class="content" v-html="html"></div>

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

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

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

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

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

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

 1.wrap {
 2  :deep(.inner) { margin: 8px; }
 3  &:hover { opacity: .9; }
 4}

10. CSS Modules vs `<style scoped>`

	`<style scoped>`	CSS Modules (`<style module>`)
隔离方式	属性 + 改写	生成哈希类名并通过 `$style` 使用
使用体验	直接写普通 CSS	模板/脚本中以 `:class="$style.xxx"` 引用
穿透子组件	需 `:deep()`	天然不跨组件；同样需要暴露 API 或使用全局类
动态命名	无需管理类名冲突	通过 `$style` 显式引用
迁移第三方	易于“覆盖”组件内部（配合 `:deep`）	通常不直接覆盖第三方内部类

何时用哪个？

组件内部样式 + 偶尔穿透：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 基础隔离

 1<template>
 2  <button class="btn">OK</button>
 3</template>
 4
 5<style scoped>
 6.btn { background: #0ea5e9; color: #fff; }
 7</style>

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

14.2 穿透子组件内部

 1<!-- Parent.vue -->
 2<template>
 3  <Child class="wrap" />
 4</template>
 5
 6<style scoped>
 7.wrap :deep(.child-inner) { padding: 8px; }
 8</style>

14.3 作用到插槽（Vue 3）

 1<!-- TagList.vue -->
 2<template>
 3  <slot />
 4</template>
 5
 6<style scoped>
 7:slotted(.tag) { border: 1px solid #999; padding: 2px 6px; }
 8</style>

14.4 配合 v-html

 1<template>
 2  <div class="content" v-html="html"></div>
 3</template>
 4
 5<style scoped>
 6.content :deep(h1) { font-size: 20px; margin: 12px 0; }
 7</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. 推荐实践

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

 1/* 父 */
 2.panel { --gap: 8px; }
 3/* 子 */
 4.grid { gap: var(--gap); }

对第三方库优先用主题 API；必要时加命名空间类 + :deep() 精选覆盖面。
保持选择器浅、命名清晰，把“跨组件样式”集中到少数“桥接”文件维护。

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