The result of attribute overriding in the `style` is incorrect
Version
3.2.26
Reproduction link
Steps to reproduce
Look at the font sizes of the two texts
What is expected?
The font size for both texts is 20 px
What is actually happening?
The font sizes of the two texts are different
normalizeStyle needs to be modified
- Solution 1: Delete attributes before reassigning them. This solution does not perform well.
- Solution 2: Iterate arrays and objects from back to front. In this case, the higher priority must be first.
objects in array are merged in order. your problem is that you are using "ambiguous" style properties and hence getting a less intuitive style expressed
font-size vs font
iterating in reverse will add additional complexity to the merge logic and probably more cost to runtime, since more checks need to be performed on the merge.
my suggestion would be to write your own merge strategy function if you know that you have to deal with dirty / conflicting input.
it will also be a good workaround for your other issue (https://github.com/vuejs/vue-next/issues/5106)
since you will pass an object instead of array to your :style binding. ( which right now has inconsistent behavior )
Vue's style merging is simple object property merging. There's no way for Vue to support merging logic of all possible CSS shorthands, and you should not expect it to work. As @lidlanca suggested, you'll have to either stick to explicit style properties, or write your own merging logic.