Vue version

3.5.16 (but it doesn't appear to be version specific)

Link to minimal reproduction

https://play.vuejs.org/#eNqNUl1PwjAU/StNfVMcGMQHnCRqMNEHNcJjEzPbKxS7tmm7OUP4794WwcWQxbfufNx77snW9NrarK6AjmkeoLSqCDBhmpBcyJpwVXh/xaipAjhGE/GH8sCDNBrJO+l8yPtIdutmwI0W/xDOl9K1dLtX3m8FxU8fvhQQz40FgUiWwpJ1tLwZJ8CNycg2xBslBTkaDAaXTG+i85ickOxnXVt/Gow97Mn7admE9mjAhfpdLrKVNxrbS35GuSmtVOCebJzqGR1vJ0euUMp8PiQsuAp6O5wvgX8cwFe+iRijzw48uBoY3XOhcAsIW3o6e4QG33uyNKJSqO4gXwBvq7ZFR9lNpQXGbulS2vvSGhekXsz9tAmg/e6oGDQqN0nPKP5Ctx2n/8YdZufJh31ii681uDgTCxxmo+zsgm6+ATos2AM=

Steps to reproduce

Use a scoped selector that begins with a star followed by a combinator. e.g. * > .section, * + .section or * ~ .section.

What is expected?

The * should be preserved.

What is actually happening?

The * is removed, leading to an invalid CSS selector.

If the selector is nested then the resulting selector is valid, but it won't match the correct elements. In that scenario, & can be used to work around the issue.

Nesting also leads to problems with the descendant combinator (space), e.g.:

.outer {
  * .section {
    background-color: #f00;
  }
}

The * is important here, it ensures that direct children don't match. You can see the difference by removing the scoped in the Playground.

• Playground

Any additional comments?

I believe this is unrelated to the other issues with * selectors that have been discussed recently, as those only apply to a trailing *, not a leading *.