前言
在前端开发中，Vue 的 scoped 属性一直是解决样式冲突的利器。如果你也对它的原理和使用技巧感兴趣，这篇文章将为你一一解答。
Scoped 的原理：唯一属性实现样式隔离
Vue 的 scoped 属性是单文件组件（.vue 文件）中一个非常重要的特性。它的核心原理是通过为组件的 DOM 元素和 CSS 添加一个唯一的属性选择器，从而实现样式的局部作用域。
具体来说，当你在 <style> 标签中添加 scoped 属性后，Vue 会为组件中的每个元素生成一个类似 data-v-mlxsojjm 的唯一属性，并将这个属性添加到对应的 CSS 选择器中。这样，样式就只会作用于当前组件，而不会影响其他组件。
例如，以下代码：
<style scoped>
.container {
background: red;
}
</style>
会被编译为：
.container[data-v-mlxsojjm] {
background: red;
}
同时，模板中的元素也会被添加相同的属性：
<div class="container" data-v-mlxsojjm></div>
这种机制不仅实现了样式隔离，还支持 CSS 预处理器（如 Less、Sass）和 CSS Modules 的深度集成。
注意点：子组件根节点与插槽的特殊性
虽然 scoped 样式不会渗透到子组件中，但子组件的根节点会同时受到父组件和自身样式的影响。Vue 的这种设计允许父组件从布局角度调整子组件的根元素样式。例如，如果父组件和子组件都定义了相同的类名样式，父组件的样式会覆盖子组件的样式。
此外，scoped 对插槽（slot）也有特殊的影响。插槽内容会同时包含父组件和子组件的 scopedId，因此会同时受到两者的样式影响。如果样式权重相同，父组件的样式会覆盖子组件的样式。
深度选择器：父组件如何精准穿透子组件样式
在实际开发中，我们有时需要在父组件中修改子组件的样式，比如在使用第三方组件库时。Vue 提供了深度选择器来实现样式穿透，常见的语法有 /deep/、::deep 和 :deep()。例如：
.a :deep(.b) {
color: green;
}
会被编译为：
.a[data-v-9ea40744] .b {
color: green;
}
这样，父组件的样式就可以穿透到子组件中。
总结
Vue 的 scoped 样式通过唯一属性实现了样式隔离，同时支持多种 CSS 模块化方案。在使用时，需要注意子组件根节点和插槽的样式影响，以及如何通过深度选择器实现样式穿透。掌握这些技巧，可以帮助你更好地管理组件样式，避免冲突。
