Hello!
Thanks for amazing work, VueJS rocks! In vue-loader docs it's stated: "With scoped, the parent component's styles will not leak into child components. However, 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 the parent can style the child root element for layout purposes."
What is the reason for such feature? In practice it always corrupts my layouts: having "root" class for parent and child component (short and reasonable name if scoped flag is used) will leak parent styles like "display: flex" into child root element, destroying it's layout. So I always need to create "unique" names for my root element classes, which greatly damages "scoped" experience.
Blake Newman
Frontend Engineer, Speaker and @vuejs core team member. Ensuring maintainable and performant code with Sacrificial Architecture principles.
This follows typical CSS structures. Ideally you should place all of the critical CSS in the child.
This child should then be responsible for its defualt structure and style.
The parent may or may not choose to change that components CSS. It depends on the context.
For example:
A button component has its default styling, this will be things like size, colour ect.
I use this button component in my 'page' component. However in this case I was it positioned fixed, so my parent component will do this as this is styling in in the context of this components layout structure.
Hope that helps