Why are component styles polluted?

[zbs-ha]

Vue version

3.5.27

Link to minimal reproduction

https://play.vuejs.org/#eNqFUrFOwzAQ/RXLS5cqGWAKoRKgDjAAAoYOXiznUlwc27KdUlTl3zk7uI0EpZvv3rvzu3u3pzfWFtseaEVrL5y0gXgIvV0wLTtrXCB3prOkdaYjs6KMQaTPrpiuy7EAqRgE6KziATAipG7klgjFvb9mlCvuOkYTMEI/Twxiv0Wd2ma8zIT8qstJbzqnwQujW7kuNt5o1L2PZEYF9pAK3JMN0mjPaEUSEjGulPl8SLngepjnvHgH8fFHfuN3McfoswMPbguMHrDA3RrCCC9fH2GH7wPYmaZXyP4HfAFvVB81jrTbXjcoe8JLau/T9qVev/nlLoD2eagoNDKHxGcU3YjrOzX6Ue5FcZnqmB5wi9nJX8afs7XKvu6TsRVpufIwnDB4eghStwZpq9XqaPJZwzH04UsBQdctNJgp0r/jhEXsmYcVRhlXEQcNXuc4aLrSWB5PZ/gGFWD1pg==

Steps to reproduce

The styles of the Comp.vue component should be isolated, but they are being polluted by ancestor class.

What is expected?

The styles of the Comp.vue component should be isolated

What is actually happening?

It works properly in Vue version <= 3.5.3.

System Info

Any additional comments?

No response

[linzhe141]

#10567

v3.5.4 has modified CSS scope injection based on this issue.

v3.5.3	v3.5.4

[zbs-ha]

App.vue:

<script setup lang="ts">
import Comp from './Comp.vue'
</script>

<template>
  <div class="alarm">
    <div>
      <Comp></Comp>
    </div>
  </div>
</template>

Comp.vue:

<script setup lang="ts"></script>

<template>
  <div :class="{ alarm: false }">
    <div>
      <div class="info">XXX</div>
    </div>
  </div>
</template>

<style scoped>
.alarm .info {
  color: red;
}
</style>

input css:

.alarm .info {
  color: red;
}

output css:

.alarm .info[data-v-d7f096ae] {
    color: red;
}

should css:

.alarm[data-v-d7f096ae] .info[data-v-d7f096ae] {
    color: red;
}

Even if the alarm is false, the info remains red, which is obviously not what we want.

[Justineo]

F.Y.I. #12244

[edison1105]

duplicate of #13746