子父组件中同名选择器的疑问

[LiarAndQuan]

我的父组件Home.vue的样式表如下:

我的子组件Message.vue样式表如下:

为什么我子组件中.container的样式会不生效,我的想法是加了scoped不是影响自己组件中的样式吗

求助大佬们,前端入门,应该是简单的问题但是我搜了很多不知道为什么

[likui628]

playground 1
如下图，确实会有这个问题

再包一层就不会有这个问题
playground 2

建议父子组件的根样式名称还是不要一样为好

[LiarAndQuan]

非常感谢,困扰许久

[likui628]

https://stackoverflow.com/questions/49458582/parent-scoped-class-name-is-also-applied-to-slot-child
里面有句话

It is not completed isolated and would not make sense to be. Sometimes will be needed a parent component to overwrite the child component style, and that is why.

我觉得说的很有道理

[LiarAndQuan]

看了一下,原来是有这样设计的道理