Scoped styles work not as expected

[silentmantra]

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.

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.

What are workarounds for that (I don't want to bother with CSS modules though) ?

[likui628]

https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements

a child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS.
This is by design so that the parent can style the child root element for layout purposes.

A very easy workaround is wrapping it with a div