Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
scoped css style bleeds from child component to root of that component when invoked by parent component #11245
Steps to reproduce
Nothing, just look at the codesandbox and observe how the root gets a red border from a style defined deep into the child component
What is expected?
A scoped style of a child component should not 'callable' from outside that component (even if it's on the root element of that component). In this example, the root of child should not have a red border.
What is actually happening?
Because two scoped styles with the same names have been defined in the parent and root components, the root element in the child component get both "data-v-*" attributes, and thus has the unwanted inner style applied to it due to name collision
Not that this bug is not about whether one can style a child element by leaking css from the parent (which is debatable, but a different point altogether, see: vuejs/vue-loader#957)
In this case, scoping isn't quite working and can result in unwanted behavior if a component author uses a style name that's too generic.
The class and style attributes provided to the component will automatically be merged to the root element. https://vuejs.org/v2/guide/components-props.html#Replacing-Merging-with-Existing-Attributes