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

Overwriting "style" attribute [Vue 2.0] #3997

Closed
rstoenescu opened this issue Oct 20, 2016 · 8 comments · Fixed by #4138
Closed

Overwriting "style" attribute [Vue 2.0] #3997

rstoenescu opened this issue Oct 20, 2016 · 8 comments · Fixed by #4138

Comments

@rstoenescu
Copy link
Contributor

Hello,

With Vue 1 "style" attribute is "merged", but with Vue 2 it is completely overwritten. Is this by design?

In the following jsfiddle, if you remove "style" attribute it will then apply "style" from within component definition. As long as "style" is present on "" (from main HTML window), it will completely overwrite component's style:
https://jsfiddle.net/rstoenescu/t0kb6vyu/2/

Thanks!

@LinusBorg
Copy link
Member

If you define a static attribute, Vue will not attempt to dynamically merge it.

If you provide a binding, Vue will do that:

https://jsfiddle.net/t0kb6vyu/3/

@rstoenescu
Copy link
Contributor Author

Ok, nice to know. But Vue 1 did merge regardless of static or dynamic attribute. It would be nice if this behavior can be continued with Vue 2 as this is quite important when writing libraries/frameworks with Vue 2. I can elaborate if needed. Just my thoughts. Thanks for the answer!

@LinusBorg
Copy link
Member

Yeah we will look into that, sure!

@defcc
Copy link
Member

defcc commented Nov 3, 2016

Like class module, I think style should also have the same behavior for consistency. I'll try to make a PR.

@yyx990803
Copy link
Member

@defcc yeah, probably need to treat staticStyle and style separately, and need to parse static style strings into objects.

@defcc
Copy link
Member

defcc commented Nov 3, 2016

OK, I'll take a look :)

@defcc defcc self-assigned this Nov 4, 2016
@defcc
Copy link
Member

defcc commented Nov 5, 2016

Almost done. I'll make a PR later.

yyx990803 pushed a commit that referenced this issue Nov 7, 2016
… (#4138)

* merge style between components

* update test case

* update style compiler

* add paren to style binding code

* update background property parsing

* introduce interpolation warning and refactor var to const
@rhyek
Copy link

rhyek commented Nov 10, 2016

Will this change merge styles in this case?

<text-element style="color: red;"/>

text-element.vue

<script>
  export default {
    render(createElement) {
      return createElement('input', {
        attrs: {
          type: 'text',
          style: 'text-align: right;'
        }
      });
    }
  };
</script>

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

Successfully merging a pull request may close this issue.

5 participants