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

Issue

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

Solution

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

Answered By - skirtle