scoped通过编译期为元素添加data-v-xxx属性并重写css为.class[data-v-xxx]实现隔离，依赖构建工具，不生效于动态dom或cdn引入场景。
Scoped CSS 在 Vue 3 中不是“锁定”样式，而是通过属性选择器实现作用域隔离——它不阻止你写错选择器，也不拦截运行时动态插入的 DOM；它只在编译期给元素加 data-v-xxxx 属性，并重写 CSS 规则匹配该属性。
scoped 是怎么把 class 变成 .class[data-v-xxxx] 的
Vue 3 的 @vue/compiler-sfc 模块在解析 <style scoped></style> 时，会做两件事：一是为组件生成唯一 ID（基于文件路径 + 内容哈希，如 getHash(normalizedPath + source)），二是调用 compileStyleAsync，用 PostCSS 插件（如 postcss-selector-scope）遍历所有选择器，逐个追加 [data-v-xxxx] 属性条件。
这个过程发生在构建阶段（Vite 启动 @vitejs/plugin-vue 时触发），不是运行时行为。所以：
- 没有构建工具（比如直接用 CDN 引入
vue.global.js）时，scoped不生效 - 手动改 DOM class 或插入新元素，不会自动带上
data-v-xxxx属性 - 服务端渲染（SSR）中，若未启用对应插件或配置，
data-v-xxxx可能缺失，导致样式不匹配
为什么子组件根元素有两个 data-v-xxx 属性
当父组件使用了 scoped，又在模板里直接引用子组件（如 <child-comp></child-comp>），而子组件自己也有 scoped 样式时，子组件的根元素会被同时注入两个属性：data-v-parent 和 data-v-child。
这是因为：
- 父组件编译时，会为所有子组件根节点打上自己的
data-v-parent（用于父组件内:deep()等穿透逻辑） - 子组件自身编译时，也会给自己的根元素加上
data-v-child - 最终浏览器看到的是类似
<div class="box" data-v-parent data-v-child> <p>这本身无害，但要注意：如果父组件写了 <code>.box[data-v-parent]，它仍能命中子组件根元素——这是 Vue 设计的“父可影响子根节点”的边界规则，不是 bug。
vue-component-analyzer下载递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
:deep()不是万能穿透，它只移除父选择器的data-v限制:deep(.child)编译后变成.child（不带[data-v-xxxx]），但它前面仍保留父级作用域选择器结构。例如：.parent :deep(.child) { color: blue; }编译结果是：
.parent[data-v-xxxx] .child { color: blue; }也就是说：
-
:deep()只解除.child自身的选择器作用域，不解除.parent的 - 如果
.child所在元素没被父组件渲染（比如是异步加载、v-if未挂载），这条规则依然存在但不生效 - 不要写
:deep(div) :deep(span)——嵌套:deep()无意义，第二层不会额外处理 - 不能用
:deep()影响全局第三方组件的 shadow DOM 内部（如某些 Web Component）
动态类名和
:slotted()容易被忽略的边界:class绑定的类名（如:class="{ active: isActive }"）不会被自动添加data-v-xxxx，因为它是运行时决定的，编译期无法预测；同理，插槽内容由父组件提供，子组件的scoped默认不作用于插槽内容。所以：
- 想让插槽内容受子组件样式控制，必须显式用
:slotted(.item) -
:slotted()编译后是.item[data-v-xxxx]，但只匹配插槽直接子节点，不递归深入 - 第三方组件（如 Element Plus 的
<el-button></el-button>）内部结构不受你的:deep()自动覆盖，需确保选择器足够具体，且目标元素确实存在 - 如果用了 CSS Modules（
<style module></style>），它和scoped机制正交，别混用——module做类名哈希，scoped做属性匹配，二者叠加可能造成冗余或冲突
最常被漏掉的一点：scoped 样式对
<style></style>标签里用@import引入的外部 CSS 文件无效——那些规则不会被重写，也不会带data-v-xxxx，相当于全局样式。 -
