scoped css 仅在构建阶段为元素添加 data-v-xxx 属性并重写选择器，不提供运行时防护，依赖构建工具，cdn 引入或 ssr 缺失插件时失效，:deep() 仅解除目标选择器作用域限制且仅穿透一级。
Scoped CSS 不会“锁定”样式，它只做一件事：在构建阶段给元素加 data-v-xxx 属性，并把你的 .class 改成 .class[data-v-xxx]。它不拦截 JS 动态插入、不处理 v-html、也不管你手写错选择器——这些都得你自己兜底。
scoped 是编译期行为，不是运行时防护
它依赖构建工具（比如 Vite 的 @vitejs/plugin-vue）在解析 SFC 时调用 @vue/compiler-sfc 和 PostCSS 插件完成转换。这意味着：
- 直接通过 CDN 引入
vue.global.js时，scoped完全不生效 - 服务端渲染（SSR）若未启用对应插件或未同步生成
data-v-xxx，样式会丢失匹配 -
v-html渲染的内容、document.createElement创建的节点，都不会自动带data-v-xxx - 子组件根元素会被父组件和自身同时打上两个
data-v-xxx属性（如data-v-parent data-v-child），这是设计行为，不是 bug
:deep() 只解除目标选择器的作用域限制
:deep(.child) 的作用非常具体：它只移除 .child 这个类名的选择器约束，但前面的父级路径仍保留 [data-v-xxx]。例如：
.parent :deep(.child) { color: blue; }
编译后变成：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章