Weird v-bind attribute merging

[wenfangdu]

Version

2.6.11

Reproduction link

https://codepen.io/wenfang/pen/VwaeOxW?editors=1111

Steps to reproduce

None

What is expected?

Since v-bind="{ foo: 'baz' }" is written after foo="bar", I expected the final DOM div has foo="baz"

What is actually happening?

The DOM div has foo="bar", is this intended?

[posva]

HTML attributes are not ordered. Besides, specific attributes take precedence over v-bind="{}"

[wenfangdu]

@posva In this case, foo="bar" is a static attribute, v-bind="{ foo: 'baz' }" should take precedence, then how come the produced foo value is bar?

Also, in code like this

<template>
  <!-- eslint-disable -->
  <div :foo="`baz`" foo="bar"></div>
</template>

v-bind does not take precedence not all, the produced foo value is still bar.

[Justineo]

I believe single attribute takes higher priority than the v-bind object binding. As it's more specific.

[posva]

Yes, my bad, edited the comment

[wenfangdu]

@posva
But in this case

<div v-bind="{ style: { height: '100px' } }" style="height: 300px;"></div>

Specific attribute does not take precedence over v-bind="{}", the result is style="height: 100px;"

[posva]

Style and class have different behavior as the merge properties and dynamic ones have higher priority