I started getting the following warning in Vue 3 with the ::v-deep usage.
::v-deep usage as a combinator has been deprecated. Use ::v-deep(<inner-selector>) instead
The CSS looks like as follows:
.parent ::v-deep .child {
...
}
What's the correct way to use suggested option ::v-deep(<inner-selector>)?
The relevant RFC is here:
https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md
I believe you need to change it to:
.parent ::v-deep(.child) {
Update:
The warning message mentioned in the question has been changed in later versions of Vue 3 to recommend using :deep() instead. This is an alias for ::v-deep() and it has been added to the documentation here:
This issue also occurs in Vue 2.7
[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.
I I think neither of the solutions above solve that warning.
Edited working using:
:deep() {
.class {}
}
But it finds error in npm dependencies as well