Vue version

3.5.13

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-pn21u36z?file=src%2Fcomponents%2FHelloWorld.vue,src%2Fcomponents%2FBox.vue,src%2FApp.vue,src%2Fmain-ce.js,index.html,vite.config.js,src%2FApp.ce.vue&terminal=dev

Steps to reproduce

Open the page and wait until load.

What is expected?

I would expect the first box to be red and the second box to be green.

What is actually happening?

The first box is red, also second is red.

Generally speaking this is something that can potentially be avoided by using CSS selector specifity. But the issue here is that the behavior is inconsistent between standard Vue app and the app bundled as web component.

Basically the issue here is that there is some "box" component which has its class="box" and some "nested" component which uses "box", but applies additional class and style. Like

Box.vue
<style scoped>
.box { background-color: red }
</style>

...
HelloWorld.vue
<style scoped>
.my-box{ background-color: green}
</style>

<template>
<Box class="my-box"></Box>
</template>

So, in normal Vue app (if you switch the mode in Vite config in example) the styles will get applied from deepest to most shallow, like Box styles will be injected into DOM and then HelloWorld styles. For CE that's not (always?) the case and styles get applied "in order", so HelloWorld gets injected before Box.

I've been trying to find some info regarding this behavior, but I only found the general PR @11517 which adds some support to web component styles. Is it something that is anyhow achievable to behave like normal Vue app ? Or is there some oversight from my side here ?

I would gladly take a look at this if I'd been given a bit of a guidance here, where approximately should I look into, is it core, or maybe compiler etc. ?

System Info

Chrome 134