深度选择器-样式穿透

以前在项目开发中，如果使用了第三方UI库，要覆盖样式，通常使用>>>深度选择器来进行样式穿透

比如：

<style scoped>
.a >>> .b{
    /* ... */
}
</style>

但是如果项目中使用scss,less等预处理器却无法解析>>>，所以我们使用下面的方式

<style lang="less" scoped>
.a {
    /deep/ .b{
        /* ... */
    }
} 
</style>

如果是vue项目，vue-loader自己出了一个::v-deep，用来做样式穿透，而且::v-deep更保险并且编译速度更快

<style lang="less" scoped>
.a {
    ::v-deep .b{
        /* ... */
    }
} 
</style>

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

竟然说>>>和/deep/ 已经被弃用了，这变化是真的快啊，虽然样式仍然生效，但是编译报警告这也太难受了，当然了改成:deep()就没问题了

    .inp {
        width: 350px;
        :deep(.el-input__inner) {
            height: 40px;
            background-color: var(--boxBackgroundColor);
            color: var(--whiteColor);
            border-color: var(--borderColor);
        }

        :deep(.el-input__inner):focus {
            border-color: var(--borderColor);
        }
    }