Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
fchu opened this issue Mar 25, 2020 · 4 comments

Comments

@fchu
Copy link

@fchu fchu commented Mar 25, 2020

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: 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.

@posva

This comment has been minimized.

Copy link
Member

@posva posva commented Mar 25, 2020

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 vuejs/rfcs#119

@posva posva closed this Mar 25, 2020
@fchu

This comment has been minimized.

Copy link
Author

@fchu fchu commented Mar 26, 2020

@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

This comment has been minimized.

Copy link

@moumyu moumyu commented Mar 26, 2020

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

This comment has been minimized.

Copy link
Member

@posva posva commented Mar 26, 2020

Yes, it’s the same problem

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
You can’t perform that action at this time.