Scoped styles work not as expected

[silentmantra]

Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNp9Uk1v2zAM/SucLt6AwtnWm+cG2IYC2w7bsBXYRRdVYhy1siRIcuoi8H8fJTsfBdoGARK+R1KP5Nuzz97XuwFZw9oog/YJIqbBr7nVvXchwR4CbmCCTXA9VJRaHamvrvcLXq9ykDtVn7jlVjobE/Sxg6tc/7b6hsY4+OeCUW+qd9y2q/k5eoiChL03IiFFAK3SO5BGxHjF2UMQ3mPgbN1KemHdrpYfSqLsdnVWSmFMjwYhSudREVIv5fvc99YFhaH54EeIzmgFXRCPpBbAC6W07Rr4+N6PhExFX261ZhcsUTu70V19F52lRZVmnGUd2mD45ZOmaTlroDCZEzTsw4+CpTDgxQGXW5T3z+B3ccwYZ78DRgw75OzIJRE6TDN9/fcnjvT/SPZODYayXyH/IE07ZI1z2pfBKpJ9llfUfi83pS3cxOsxoY2HobLQnDmVfM7oxvnWL41+kntZX5Y62idt8eCP7LTTzcJc9sLJD3T+3Gx1BPoKkFttFOT1O4s2HXvMlqDo3BQUFuipMQg5WWOpvxXyvguOttMY3W3T7A4ip7nn4ofpPzdIFkA=

Steps to reproduce

• Create a child component with <div class="wrapper"> as a root element.
• Create a parent component and place the child component in <div class="wrapper">.
• Create a scoped style in the parent component for the .wrapper.

What is expected?

The style isn't applied to the child component

What is actually happening?

The style is applied to the child's <div class="wrapper"> also.

System Info

No response

Any additional comments?

Maybe I don't understand and this is VERY design reasoned, but it actually makes working with components worse. Since I need to know which context a child component will be placed into. Seems a bad design for me

[silentmantra]

by design