Vue 3 ::v-deep usage as a combinator has been deprecated. Use ::v-deep(<inner-selector>) instead

Question

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>)?

Answer 1

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:

https://v3.vuejs.org/api/sfc-style.html#deep-selectors

Answer 2

Little update: now, you need to change it to:

.parent :deep(.child) {

Answer 3

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