Vue version

3.2.37

Link to minimal reproduction

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbiAgICBpbXBvcnQgQ29tcDEgZnJvbSAnLi9Db21wMS52dWUnXG4gIGltcG9ydCBDb21wMiBmcm9tICcuL0NvbXAyLnZ1ZSdcbiAgaW1wb3J0IENvbXAzIGZyb20gJy4vQ29tcDMudnVlJ1xuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGRpdiBzdHlsZT1cImJvcmRlcjogMXB4IHNvbGlkIHJlZDtcIj5cbiAgXHQ8Q29tcDEvPlxuICA8L2Rpdj5cbiAgPGRpdiAgc3R5bGU9XCJib3JkZXI6IDFweCBzb2xpZCBibHVlO1wiPlxuICBcdDxDb21wMi8+XG4gIDwvZGl2PlxuICA8ZGl2ICBzdHlsZT1cImJvcmRlcjogMXB4IHNvbGlkIGdyZWVuO1wiPlxuICBcdDxDb21wMy8+XG4gIDwvZGl2PlxuPC90ZW1wbGF0ZT4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL3VucGtnLmNvbS9AdnVlL3J1bnRpbWUtZG9tQDMuMi4zNy9kaXN0L3J1bnRpbWUtZG9tLmVzbS1icm93c2VyLmpzXCIsXG4gICAgXCJ2dWUvc2VydmVyLXJlbmRlcmVyXCI6IFwiaHR0cHM6Ly91bnBrZy5jb20vQHZ1ZS9zZXJ2ZXItcmVuZGVyZXJAMy4yLjM3L2Rpc3Qvc2VydmVyLXJlbmRlcmVyLmVzbS1icm93c2VyLmpzXCJcbiAgfVxufSIsIkNvbXAxLnZ1ZSI6IjxzY3JpcHQgc2V0dXA+XG4gIGltcG9ydCBDb21wMiBmcm9tICcuL0NvbXAyLnZ1ZSdcbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDxkaXYgY2xhc3M9XCJjb21wXCI+XG4gICAgQ29tcCAxXG4gICAgPENvbXAyLz5cbiAgPC9kaXY+XG48L3RlbXBsYXRlPlxuXG48c3R5bGUgc2NvcGVkPlxuICAuY29tcCB7XG4gICAgY29sb3I6cmVkO1xuICB9XG48L3N0eWxlPiIsIkNvbXAyLnZ1ZSI6IjxzY3JpcHQgc2V0dXA+XG4gICAgaW1wb3J0IENvbXAzIGZyb20gJy4vQ29tcDMudnVlJ1xuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGRpdiBjbGFzcz1cImNvbXBcIj5cbiAgICBDb21wIDJcbiAgICA8Q29tcDMvPlxuICA8L2Rpdj5cbjwvdGVtcGxhdGU+XG5cbjxzdHlsZSBzY29wZWQ+XG4gIC5jb21wIHtcbiAgICBjb2xvcjogYmx1ZTtcbiAgfVxuPC9zdHlsZT4iLCJDb21wMy52dWUiOiI8c2NyaXB0IHNldHVwPlxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGRpdiBjbGFzcz1cImNvbXBcIj5cbiAgICBDb21wIDNcbiAgPC9kaXY+XG48L3RlbXBsYXRlPlxuXG48c3R5bGUgc2NvcGVkPlxuICAuY29tcCB7XG4gICAgY29sb3I6IGdyZWVuO1xuICB9XG48L3N0eWxlPiJ9

Steps to reproduce

A parent component and child component have the same css class name within their own scoped styles.

What is expected?

CSS classes defined in component scoped style should not affect their children even the child uses the same class name in its own scoped styles.

What is actually happening?

CSS classes in parent component scoped styles are available in immediate child components and will override child components own scoped style.

System Info

No response

Any additional comments?

In the SFC example I have 3 components (Comp1-3) which all have the scoped style and the same class name. You can observe that Comp1 css affects immediate child (Comp2) while the Comp2 affects immediate child (Comp3). If the components are outside of their affecting parent then its style is correct.

This is documented behaviour and has been since Vue 2.

https://vuejs.org/api/sfc-css-features.html#child-component-root-elements