Skip to content

CSS nesting and :deep() in scoped styles not workingย #13159

Open
@juner

Description

@juner

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNqNUlFLwzAQ/ishD6KgKdv0pdaByh70QUV9DEiX3rpuaRKStE7G/ruXlG576EQoNLn7vst3992W3hvD2gZoSjMnbGU8ceAbM+Wqqo22njzq2pCF1TXhlCXhFvCc3nKVJR0FwZnzPxKIE9pAgXc2zx2MyJYrQtICwJyzpS7hoosQMs/FurS6UcWV0FLblFgosCQhO67wi/xxhz77Z4XSAqijGigviArqPNRG5j6cCcmKqiVC5s7dcRp1choTmAr9TcM7oyz22hESZAxTxwPU8QA1S/YS6CX1OCe1qEq2clrh6GNLnApkVRLsq/GVVo7TtG+W01xK/f0cY942cNnHxRLEeiC+cpsQ4/TNggPbomP7nM9tCb5Lzz5eYIPnfbLWRSMR/UfyHZyWTdDYwR7QBJR9hItqn+ICVar8dLONB+X6poLQaFPEc4r7FAZ2qvWD3Am77u3FKfa7GHb3tMHBkYNJTmo/xcUIvxP+cIW1v1qwQS/WnrAbNprQ3S9x0Am1

Steps to reproduce

Let's display it.

What is expected?

The background color of hoge1 will turn red.
The background color of hoge2 will turn green.

What is actually happening?

The background color of hoge1 will not turn red.
The background color of hoge2 will turn green.

System Info

Vue 3.5.13
TypeScript 5.8.2

browser microsoft edge 134.0

Any additional comments?

This is how it should be:

.base1 {
&[data-v-7ba5bd90] .hoge {
    background-color: red;
}
}

In reality, this is what happened:

.base1 {
[data-v-7ba5bd90] .hoge {
    background-color: red;
}
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    ๐Ÿ”จ p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.has workaroundA workaround has been found to avoid the problemscope: compiler

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions