scoped css style bleeds from child component to root of that component when invoked by parent component

[fchu]

Version

2.6.11

Reproduction link

https://codesandbox.io/s/vue-template-y71xh

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: https://github.com/vuejs/vue-loader/issues/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.

[posva]

You pretty much explained the problem and linked to the issue that already hold the discussion related to it

You should take a look at https://github.com/vuejs/rfcs/pull/119

[fchu]

@posva Is it the same issue though? In this case the resulting behavior is that a scoped style intended for a child component's inner elements gets applied higher up in the DOM tree unknowingly by the caller

[moumyu]

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

[posva]

Yes, it’s the same problem