Description
Vue version
3.5.16 (but it doesn't appear to be version specific)
Link to minimal reproduction
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.
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 *.