My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more

Reason for vue-loader to leak classes to child components?

Grigory's photo
Grigory
·Sep 21, 2017

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.