Version

3.0.4

Reproduction link

https://codesandbox.io/s/vue3-component-scoped-scss-j241l?file=/src/components/MainMenu.vue

Steps to reproduce

Follow the link and add pseudo element ":deep()" to scoped ".main-menu" CSS class of MainMenu component.

What is expected?

Styles should be applied to current component elements and slots of this component.

What is actually happening?

If don't use ":deep(.main-menu)" styles are applied only to current component elements. But if use this pseudo element, then the styles are applied only to slot elements and component elements inside ".main-menu", but not to this element (in example this is "ul" tag).

Is it still possible to apply all scoped components styles to slots inside current component without using pseudo elements from this https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md ? Sometimes this option is really convenient and flexible enough. For example, it would be nice to add some "scoped-deep" attribute to