Open in StackBlitz

npm i https://pkg.pr.new/@vue/compiler-core@13163

npm i https://pkg.pr.new/@vue/compiler-dom@13163

npm i https://pkg.pr.new/@vue/compiler-ssr@13163

npm i https://pkg.pr.new/@vue/compiler-sfc@13163

npm i https://pkg.pr.new/@vue/reactivity@13163

npm i https://pkg.pr.new/@vue/runtime-core@13163

npm i https://pkg.pr.new/@vue/runtime-dom@13163

npm i https://pkg.pr.new/@vue/server-renderer@13163

npm i https://pkg.pr.new/@vue/shared@13163

npm i https://pkg.pr.new/vue@13163

npm i https://pkg.pr.new/@vue/compat@13163

commit: bfd11af

/ecosystem-ci run

I think we'd also need to consider the case where the & is inside the :deep(). e.g.:

.foo {
 .bar :deep(&) {
 color: red;
 }
}

• Playground

This works on main, but it breaks with this PR due to the extra &.

The example above uses :deep(&), but the selector inside the :deep() could be something more complex, rather than just &.

I'm also wondering about media queries within the nesting. e.g.:

.foo {
 @media (screen) {
 :deep(.bar) {
 color: red;
 }
 }
}

There are quite a lot of edge cases here. Some combinations of nesting seem to work, while others don't.

I'm not sure whether this would be considered in scope for this PR, as some cases fail even without :deep().

强烈建议保留 :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;
}

https://github.com/orgs/vuejs/discussions/13446

Oh, I didn't realize there was a pull request for this! I added a note over here: #13159 (comment). I'd really prefer to see Vue adhering to the CSS spec in this case, rather than deviating from it further.