/
Write
Start a team blog
NEW ✨
Start a team blog, invite your team, and start publishing.

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.