vue3中 /deep/ 的使用，vue3不支持/deep/样式

vue2中是使用 /deep/ 样式穿透，在vue3中不支持了，vu3中使用:deep()取代了/deep/

:deep()的使用场景：

如果给当前组件的style 节点添加了scoped 属性，则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效，则需要使用:deep()。

如果App.vue中没有这个根节点，那么:deep()不起作用，我把根节点加上，:deep()样式就生效了。

示例

1.父组件App.vue中代码

<style lang="less" scoped>
  :deep(.title3){
    background-color:antiquewhite;
  }
</style>

2.子组件中的代码

<template>
  <h3 class="title3">受父组件影响的内容</h3>
</template>

vue3 :deep() 深度选择器使用

#swiper >.swiperContext :deep(p) {
  width: 100vw;
  height:60vw;
  background: #000;
  border:5px solid;
  box-sizing: border-box;
  color: #fff;
  border-radius: 5%;
}