We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
3.4.21
https://play.vuetifyjs.com/#eNptkN1OAyEQhV+FzIXRxLJZf25WbGL6Ct65XlB2okQKCLPbmKbvLj+7pqa9gXMOzMcMbweIQTUv3vNpROhAEO68kYTr3jImppX0vshilLMktcUwRzWUYWCkyeBzD5tkXrPugSkjY0wZYaQe1iyfsU1CoCUmmlq5wLP9R89JfVw0J00lG+nHIIvKeazlfG7iUFlbqb4+ghvtkJDGhY5JS/p7xP2nJnyql7oB0V9fLbWrdLK7WQiXGFsz4qSdQZoJ54zyCSeQi5jg9vaPcKyibGkRTZktDQXHW7jnD/yuhSweedvC+y/pQ4mT
Have a scoped style block with native css nesting
<style scoped> .v-card { background-color: antiquewhite; & .v-card-item { background-color: blueviolet; & .v-card-title { background-color: brown; } } } </style>
.v-card { &[data-v-7ba5bd90] { background-color: antiquewhite; } & .v-card-item { &[data-v-7ba5bd90] { background-color: blueviolet; } & .v-card-title[data-v-7ba5bd90] { background-color: brown; } } }
.v-card[data-v-7ba5bd90] { background-color: antiquewhite; & .v-card-item[data-v-7ba5bd90] { background-color: blueviolet; & .v-card-title[data-v-7ba5bd90] { background-color: brown; } } }
No response
:deep needs to omit the selector for anything nested under it, so :deep(.v-card) should just be
:deep(.v-card)
[data-v-7ba5bd90] .v-card { background-color: antiquewhite; & .v-card-item { background-color: blueviolet; & .v-card-title { background-color: brown; } } }
The text was updated successfully, but these errors were encountered:
Here's a similar / simplied example of this issue:
<style scoped> div { display: grid; :deep(> *) { margin: 0; } } </style>
This should output:
div[data-v-d127f3cd] { display: grid; > * { margin: 0; } }
Instead, it outputs:
div[data-v-d127f3cd] { display: grid; [data-v-d127f3cd] > * { margin: 0; } }
(The latter of course represents an entirely different DOM structure.) I would expect :deep() to "escape" all scope re-writing, but it doesn't.
:deep()
Sorry, something went wrong.
No branches or pull requests
Vue version
3.4.21
Link to minimal reproduction
https://play.vuetifyjs.com/#eNptkN1OAyEQhV+FzIXRxLJZf25WbGL6Ct65XlB2okQKCLPbmKbvLj+7pqa9gXMOzMcMbweIQTUv3vNpROhAEO68kYTr3jImppX0vshilLMktcUwRzWUYWCkyeBzD5tkXrPugSkjY0wZYaQe1iyfsU1CoCUmmlq5wLP9R89JfVw0J00lG+nHIIvKeazlfG7iUFlbqb4+ghvtkJDGhY5JS/p7xP2nJnyql7oB0V9fLbWrdLK7WQiXGFsz4qSdQZoJ54zyCSeQi5jg9vaPcKyibGkRTZktDQXHW7jnD/yuhSweedvC+y/pQ4mT
Steps to reproduce
Have a scoped style block with native css nesting
What is expected?
What is actually happening?
System Info
No response
Any additional comments?
:deep needs to omit the selector for anything nested under it, so
:deep(.v-card)
should just beThe text was updated successfully, but these errors were encountered: