Vue 3的scoped样式通过PostCSS为静态DOM添加data-v-xxx属性实现隔离，v-html、Teleport、子组件内部及第三方组件不受影响；:deep()需精确限定范围，避免全局污染；scoped与module不可混用；全局样式和CSS变量须置于独立未scoped的style块中。
scoped样式只作用于静态编译的DOM元素
Vue 3的scoped不是靠Shadow DOM或CSS隔离机制，而是通过PostCSS给模板里「写死」的标签自动加data-v-xxxxxx属性，并重写选择器（如.btn → .btn[data-v-f3f4e2a1]）。这意味着：
- v-html渲染的内容不会带这个属性，选择器完全不匹配
- Teleport挂载到
body的弹层脱离当前组件树，属性丢失 - 子组件的根元素会带父组件的
data-v-*，但它的子节点属于子组件作用域，父组件scoped进不去 - 第三方UI组件（如
<el-dialog>）内部结构不在当前模板中，不会被打标
:deep()穿透必须精确限定范围
:deep()是Vue 3唯一推荐的深度选择器语法，但它不是“万能开关”——它会把选择器降级为全局匹配，一旦写成:deep(div)，所有div都会被影响。
- 正确写法是
:deep(.el-input__inner)、:deep(.my-modal .header)，用类名或具体组件结构锚定 - 若子组件暴露了
popper-class、input-class等prop，优先传入自定义类名，比:deep()更可控、更易维护 - 在Sass中嵌套使用时，
:deep()必须放在最外层，不能被&包裹（否则编译失败）
scoped与module不能混用
<style scoped module>是无效写法。二者机制完全不同：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
-
scoped：靠属性选择器，DevTools可见data-v-xxx，适合常规组件，调试直观 -
module：类名编译为哈希变量（如$style.header），JS中可动态拼接，适合需要根据状态切换类名的场景 - 选
module就别加scoped；要scoped就不用module
全局样式和CSS变量必须放在独立<style>块
全局重置（如body、html）、CSS变量定义、主题色变量，应单独写在一个不带scoped的<style>块中，且置于SFC最顶部。
立即学习“前端免费学习笔记（深入）”；
- 否则会被后续
scoped样式覆盖（CSS层叠顺序问题） - 尤其注意：Sass的
@import如果导入的是含scoped的文件，变量不会被提升，可能导致undefined variable错误 - SCSS中定义的
$color-primary若想全局可用，必须放在未scoped的<style lang="scss">块里
scoped在嵌套多层（尤其是Sass的&嵌套）时，选择器会急剧膨胀（如.a[data-v-x] .b[data-v-x] .c[data-v-x]），拖慢浏览器CSS解析；而:deep()滥用等于主动放弃隔离——它不报错，但会让样式维护变成猜谜游戏。 
