解决警告：the ＞＞＞ and /deep/ combinators have been deprecated. Use :deep() instead.

问题

问题概述

Vue3+TypeScript项目 编写代码时 终端提示警告：the >>> and /deep/ combinators have been deprecated. Use :deep() instead.
警告信息图片示例如下：

项目详情

今天在开发项目时（项目框架为 Vue3+TypeScript）使用了UI组件库 Element Plus，但是 Element Plus 中的输入框组件以及下拉选择器组件的 样式不符合需求，因此需要 对其样式进行统一修改，修改的方式是使用的 deep深度选择器，这时候问题就出现了，使用完深度选择器后，在终端显示了如概述中的警告信息；
深度选择器deep的使用代码如下：

/deep/ .el-dropdown,
/deep/ .el-tooltip__trigger {
    position: relative;

    width: 100%;
    height: 100%;
}
1
2
3
4
5
6
7

解决方案

使用:deep()代替/deep/

:deep(.el-dropdown),
:deep(.el-tooltip__trigger) {
    position: relative;

    width: 100%;
    height: 100%;
}
1
2
3
4
5
6
7

其实在警告中已经提示了该如何修改，就是 使用 :deep() 代替 /deep/，在vue3中已经不再推荐 /deep/ 这种写法了，具体原因目前博主还没有查到，可能是为了更利于理解吧，毕竟CSS的原生属性也是类似于 :root 这种，只是查到说 :deep() 可以完全代替 /deep/ ，结果完全一致，放心使用～