vue3.0 深度选择器＞＞＞ 和 /deep/ 和 ::v-deep 被弃用‘the ＞＞＞ and /deep/ combinators have been deprecated‘

vue3.0+element plus 双汉堡组合，谁用谁知道。

今天改了一个element 的一个样式还是用原来的/deep/编译的时候发现报了如下的警告

[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead.

[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead.

竟然说>>>和/deep/ 已经被弃用了，这变化是真的快啊，虽然样式仍然生效，但是编译报警告这也太难受了

当然了改成:deep(<inner-selector>)就没问题了,注意：这里没有空格，这里没有空格，这里没有空格。不然样式不生效，敲黑板

//警告例子
<style scoped>

/deep/ .main{
    background: #df2929;
}
>>> .main{
    background: #df2929;
}

</style>


//正确例子
<style scoped>

:deep(.main){
    background: #df2929;
}

</style>

---

这里测试了::v-deep，结果仍然是发出警告。

[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead

[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

---

那为什么会这样呢，大家可以详细看这里https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md

---

最一开始用的是>>>来作为深度选择器，但是后来发现某些CSS预处理程序（例如SASS）在解析它时会遇到问题，因为这不是官方的CSS组合器。

所以后来采用了/deep/，但是又有人担心担心/deep/在Vue SFC中使用它们会导致在删除该功能的浏览器中不支持其代码。

为避免混淆的/deep/组合器，就引入了自定义组合器，::v-deep这次更明确地说明这是Vue特定的扩展，并使用伪元素语法，

但是因为兼容性原因，对于以前写的/deep/和::v-deep并不会出现样式不生效的问题，但是我们再用vue3写代码的时候就会提示警告。

所以我们用 :deep(<inner-selector>)方式改变原来的/deep/和::v-deep就好了