.prop v-bind modifier shorthand throws DOMException

[au-z]

Version

2.6.11

Reproduction link

Codesandbox: vue-hybrids .prop shorthand

Steps to reproduce

If you uncomment the second element, you'll see an error:

DOMException: Failed to execute 'setAttribute' on 'Element': '.num' is not a valid attribute name.

What is expected?

.num should be an equivalent shorthand for :num.prop

What is actually happening?

Vue throws a DOMException when trying to set a .num attribute on the element during render.

---

It appears that this feature was added as a feature request for 2.6:
#7582

There, @trusktr documented that because . characters are disallowed in attribute names, the shorthand syntax would not "...get in the way of DOM usage."

I believe the error this time around is that the Vue render function is parsing the .num attribute and attempting to set the same attribute in the DOM without first checking for the .prop shorthand and attempting to set the property of the rendered element directly.

[posva]

It looks like this was added on https://github.com/vuejs/vue/releases/tag/v2.6.0-beta.1 but never made it to the next release v2.6.0

[au-z]

Oh bummer. Any indication as to why it didn't make it? It would be a killer syntax feature and much appreciated among Vue users looking to instrument their templates with components.

[posva]

Maybe it's worth reviving the topic on the RFCS repository