Vue scoped通过编译时添加唯一data-v-xxx属性并重写CSS选择器实现样式隔离，但v-html、第三方组件、slot及动态DOM不自动携带该属性，需用:deep()穿透；基础组件、主题切换等场景应避免scoped，改用BEM或CSS Modules。
Vue单文件组件里scoped怎么真正起作用
它不是靠“加个属性就自动隔离”，而是编译时给元素加唯一属性，再给CSS选择器追加对应属性选择器。比如<div>变成<div data-v-f3f3eg9>，.btn { color: red }就编译成.btn[data-v-f3f3eg9] { color: red }。
这意味着：没被Vue模板直接渲染的元素（比如v-html插入的HTML、第三方UI组件内部节点、slot透传内容）不会带这个data-v-xxx属性，你的scoped样式就压根不生效。
- 动态插入的DOM（如
document.createElement）也不会自动带上属性 -
:deep()或::v-deep是为穿透scoped而设的，但只对子组件有效，对原生标签无效 - 如果用
style lang="scss"，:deep(.el-input)能影响Element Plus组件内部，但:deep(div)不会让所有div变红——它只作用于当前组件树中被scoped规则覆盖到的后代
什么时候不该用scoped，或者必须配合其他手段
当你要改全局UI库的默认样式、做主题切换、或者写可复用的基础组件（比如一个BaseButton被多个父组件引用且需统一视觉），scoped反而碍事——它把你锁死在单个组件内，连@import进来的变量都得重复声明。
常见折中做法：
立即学习“前端免费学习笔记（深入）”；
- 基础组件用非
scoped样式 + BEM命名（如.base-button--primary），靠命名空间隔离 - 页面级独有样式才用
scoped，避免污染其他路由模块 - 需要局部覆盖第三方组件时，用
:deep()+ 明确类名，别写:deep(*)——这会触发重绘风暴，尤其在列表滚动时明显卡顿
scoped和CSS Modules谁更适合工程化项目
Vue的scoped是模板驱动的，依赖SFC编译器；CSS Modules是构建工具（如Webpack/Vite）层面的，生成哈希类名并导出映射对象。前者写法轻量，后者类型安全更强（支持TS推导styles.button）。
如果你的项目已用TypeScript + Vite，且组件常通过props.className接收外部样式，CSS Modules更可控——scoped无法把类名暴露给父组件，而styles对象可以。
-
scoped不支持在JS里读取最终类名（没法做动态class拼接） - CSS Modules的
compose功能能复用基础样式，scoped只能靠预处理器@extend或重复写 - Vite下两者性能差异极小，但CSS Modules的HMR（热更新）更稳定，
scoped在嵌套深时偶尔漏更新
调试scoped样式失效的三步检查法
打开开发者工具，先看目标元素有没有data-v-xxxx属性；没有，说明它不在当前组件模板里渲染；有，再看样式面板里对应规则是否被划掉或权重不足。
- 检查是否误用了
<style>而非<style scoped>（少个单词就全失效） - 检查是否在
<template>外写了<style scoped>（比如放在<script setup>下面，部分Vue版本会忽略） - 检查是否用了
!important强行覆盖——它会绕过scoped的属性选择器优先级，导致行为不可预测
最常被忽略的是：父子组件同名class在scoped下其实是不同类，但开发者凭肉眼以为“应该一样”，结果改了父组件的.header，子组件的.header纹丝不动——它们根本不是同一个东西。
