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

[cchangwen]

强烈建议保留 :deep inner-selector 语法，因为它更符合语言上的直觉

而 :deep(inner-selector) 多了个小括号语法，是额外的知识负担
而且需要多次看文档、踩坑，才能理解它的一些细节
比如 :deep(inner-selector) 会强制添加空格，这和 scss 的 & 语法冲突：

div:deep() {
  &:hover span { color: red; }
}

// 编译结果：
// 这里 :hover 前面多了个非预期的空格
div[data-v-2ecdb3cb] :hover span {
  color: red;
}

而 :deep 能与 scss 的 & 语法兼容，显然更灵活，
重要的是它符合直觉、容易理解：只需要把 :deep 理解成决定 [data-v-] 位置 css 伪类

div:deep {
  &:hover span { color: red; }
  ... 更多嵌套规则，也只需要在外层加一个 :deep
}

div[data-v-2ecdb3cb]:hover span {
  color: red;
}

[LinusBorg]

:deep(div) {
  &:hover span { color: red; }
}