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 styles inconsistent between functional and stateful components #1136

Open
zephraph opened this issue Jan 21, 2018 · 0 comments

Comments

Projects
None yet
2 participants
@zephraph
Copy link

commented Jan 21, 2018

Version

13.7.0

Reproduction link

https://codesandbox.io/s/n4kv4mk1j4

Steps to reproduce

Inspect the markup of the buttons in the output panel. Pay close attention to how the v scoped style attributes are being applied in each case.

What is expected?

Regardless of whether a component is wrapped in a stateful scoped styles component or a functional scoped styles component, how attributes are applied should be the same.

What is actually happening?

  1. When a component with scoped styles has a child component that is both stateful and has scoped styles, the wrapper element of the child component gets both the parent v attribute and the child v attribute. If the child element is functional with scoped styles, it only has it's own v attribute. (I would expect the functional child to also have its parent v-attribute.)

  2. When a functional component with scoped styles has a functional child component without scoped styles the child component will only have the parent's v attribute on its root element. If the parent component is stateful then the v-attribute of the parent will apply to every element in the functional child component. (I'm not sure what's the correct behavior here. It would seem better if the attributes didn't flow all the way down the functional child w/ stateful parent)

There are other issues here, I'm just a bit too tired to list them all at the moment. The gist of the problem is if you decide to change a component from stateful to functional or vice versa you're probably going to have broken styles.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.