Why is style isolation not working?

[ChinaChenMingQuan]

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNqdUk1PwzAM/StRLlxGKjS4jDIEaEhwAMR2jIS61Cvd0iTKx9g07b/jpOo+pGlI9FT7+Tnv2d7QB2PYMgAd0NwJWxtPHPhghlzVjdHWk+cg5VhYAEVmVjfkgmX7VKRe3HKVZy0ZaRh4aIwsPGBESG6IkIVzd5waTof3+OVZ7I/QvtEwP+jaghOQkBR4jdypLtdIj8hfxKxjYphnB2IwdH4tgTihDZSYYYZsImdaiEVldVDlpdBS2wGxUKKvbbIWOVhMe9QjU83qis2dVjizROZU6MbUEuy78bVWjtNB2zZihZT65zXlvA3Q6/LiG8TiRH7uVjHH6YcFB3YJnO4wX9gKfAuPxm+wwv8d2OgySKw+A36C0zJEjW3ZIxpG2Qd1Se1L2nytqokbrTwo15mKQmPlNtVzitt/OmN9L7fPrhMPJ4pTPL4fHOPxzZy4mO5m/r3OKr52vFAU8rUEG82hhD67YVd9uv0FQs8ICg==

Steps to reproduce

App.vue:

<script setup>
import FullScreen from './FullScreen.vue';
</script>

<template>
  <p class="p">????</p>
  <FullScreen></FullScreen>
  <Teleport to="body">
    <FullScreen></FullScreen>
  </Teleport>
</template>

<style scoped>
.p {
  background-color: red;
}
</style>

FullScreen.vue:

<template>
<p class="p">??????</p>
</template>

<style scoped>
.p {
  background-color: green;
}
</style>

Google Chrome version: 131.0.6778.140

en-us:
Why is the background-color of FullScreen.vue red instead of green?
Why isn't css style isolation working?

zh-cn:
为什么 FullScreen.vue 的背景颜色是红色而不是绿色？
为什么 CSS 隔离不起作用？

--deepl translator.

What is expected?

en-us:
I need real style isolation.

zh-cn:
我需要真正的样式隔离

--deepl translator.

What is actually happening?

en-us:
Why is the background-color of FullScreen.vue red instead of green?
Why isn't css style isolation working?

zh-cn:
为什么 FullScreen.vue 的背景颜色是红色而不是绿色？
为什么 CSS 隔离不起作用？

--deepl translator.

System Info

System: Windows 10.
Google Chrome version: 131.0.6778.140.

Any additional comments?

No response

[edison1105]

this is the expected behavior. see https://vuejs.org/api/sfc-css-features.html#child-component-root-elements

[ChinaChenMingQuan]

What kind of development philosophy is this, and why is the parent component forcibly interfering with the styling of the child component without the use of :deep?

这是什么开发理念？为什么父组件不使用 :deep 就强行干预子组件的样式？

--deepl translator.

[edison1105]

文档里说的已经很清楚了。你可以使用 https://vuejs.org/api/sfc-css-features.html#css-modules

[ChinaChenMingQuan]

Understood, I've been writing a lot of blazor lately and thought the module wasn't much use ignoring it. Thank you for your answer.

理解了，我最近blazor写多了，还以为模块没有什么用忽视掉了。谢谢你的回答。

--deepl translator.