scoped样式如何穿透？

scoped属性是Vue.js中用于CSS样式的作用域限定，它通过添加一个独一无二的属性选择器来确保样式只作用于当前组件的元素。然而，在某些情况下，我们可能需要让某些样式能够突破这个作用域的限制，即所谓的scoped样式穿透。

要实现scoped样式的穿透，可以使用:not()伪类选择器配合当前组件的独有属性。例如，如果你有一个scoped样式定义如下：

<style scoped>
.father >>> .child {
  color: red;
}
</style>

这段代码表示选中当前组件内所有具有父子关系的元素，让子元素的文本颜色变成红色。不过，这种方法在Vue.js中是不被推荐的，因为它违反了封装原则。

推荐的方法是使用深度选择器，Vue.js 2.3.0+版本开始支持，需要在选择器前面加上`>>>`或`/deep/`。例如：

<style scoped>
/deep/ .child {
  color: red;
}
</style>

或者

<style scoped>
>>> .child {
  color: red;
}
</style>

这两种方式都会穿透作用域，将样式应用于子组件中对应的类。

但是要注意，在Vue.js 3中，推荐使用`:slotted`伪类来穿透作用域，如：

<style scoped>
::v-slotted(.child) {
  color: red;
}
</style>

穿透scoped样式时，要特别注意不要无意间影响到其他组件的样式，保持选择器的特异性尽可能高以避免潜在的样式冲突。