vue:deep、/deep/、＞＞＞样式能穿透到子组件

为什么vue:deep、/deep/、>>>样式能穿透到子组件

在scoped标记的style中，只要涉及三方组件，那deep符号会经常被使用，用来修改外部组件的样式。

不使用deep

要想修改三方组件样式，只能添加到scoped之外，弊端是污染了全局样式，后续可能出现样式冲突。

<style lang="less">
.container {
    .el-button {
        background: #777; 
    }
}

使用 /deep/ deprecated

 .container1 {
    /deep/ .el-button {
        background: #000; 
    }
}

使用 >>> deprecated

.container2 >>> .el-button {
    background: #222; 
}

当在vue3使用/deep/或者>>>、::v-deep，console面板会打印警告信息：

the >>> and /deep/ combinators have been deprecated. Use :deep() instead.

由于/deep/或者>>>在less或者scss中存在兼容问题，所以不推荐使用了。

使用:deep

.container3 {
    :deep(.el-button) {
        background: #444; 
    }
}

deep是不支持嵌套的。