Vue单文件组件加scoped不能完全保证样式不泄漏，它通过属性选择器（如[data-v-f3f3eg9]）实现伪作用域，但对v-html、第三方组件、动态插入DOM及深度选择器外的子组件内部元素无效。
Vue单文件组件里加scoped真能保证样式不泄漏吗
不能完全保证。加了scoped只是让Vue对样式做属性选择器转换，不是CSS作用域隔离的银弹。
它本质是给当前组件的根元素和所有子元素自动添加一个唯一data属性（比如data-v-f3f3eg9），再把你的CSS选择器重写成带这个属性的版本。所以只要你的样式没用到深度选择器、全局类、或动态插入的DOM，基本安全。
- 子组件的根元素会被加上
data-v-xxx，但它的子元素不会——除非你显式写了:deep()或::v-deep - 用
v-html插入的HTML不会被自动打上属性，里面的class不受scoped保护 - 第三方UI库组件（如
<el-button>）默认不在当前组件DOM树内，它们的样式不会被scoped影响，也不会影响你
什么时候必须用:deep()而不是直接写class名
当你需要穿透scoped去样式化子组件内部结构时，比如改<el-input>里的<input>边框，或者覆盖<transition>生成的过渡类。
直接写.el-input__inner { border: 1px solid red }在scoped下无效，因为Vue不会给子组件内部元素加data-v-xxx，你的选择器匹配不到。
立即学习“前端免费学习笔记（深入）”；
-
:deep(.el-input__inner)→ 编译后变成[data-v-f3f3eg9] .el-input__inner，可命中子组件DOM -
:deep()只作用于其后的选择器，前面的父选择器仍受scoped约束 - Vite + Vue 3推荐用
:deep()；老项目若用::v-deep需确认loader支持（如vue-loader ≥15.9）
scoped样式和CSS Modules有什么区别
两者目标相似，但机制不同：scoped靠属性选择器模拟作用域，CSS Modules靠编译期重命名class名实现隔离。
这意味着：scoped下你可以用div p这种后代选择器，而CSS Modules要求所有class都必须显式声明并导入；scoped无法防止通过JS动态设置class="xxx"触发全局样式，CSS Modules则因class名被哈希过，天然规避这点。
-
scoped对预处理器（Sass/Less）友好，嵌套写法照常工作 - CSS Modules在Vue中需配合
defineCssModule()或useCssModule()使用，开发体验稍重 - 同个组件里混用
scoped和全局<style>没问题，但别指望scoped样式能影响全局<style>定义的class
为什么有时候加了scoped，样式还是影响到了别的组件
最常见原因是用了属性选择器或通配符，意外匹配到其他组件的DOM结构，比如[type="text"]、input:focus、div > *这类无上下文限制的选择器。
另一个隐蔽原因是CSS优先级：如果你的scoped样式权重不够（比如只写了.btn），而外部库用了button.btn或.el-button:hover，那它依然会赢。
- 检查浏览器开发者工具里，实际渲染的CSS规则是否带
data-v-xxx前缀；没带说明没生效或被覆盖 - 避免用
!important硬压，优先提高选择器 specificity，比如把.btn改成.my-comp .btn - 动态class（如
:class="{ active: isActive }"）不会被scoped处理，对应的.active样式如果在全局存在，就会泄漏
scoped是实用主义方案，不是魔法。它省事，但得清楚它在哪条线内起作用、哪条线外要自己兜底。真正容易被忽略的，是那些没出现在模板里、却由第三方库或JS动态插入的DOM节点——它们永远游离在scoped之外。 
