Version

3.2.30

Reproduction link

sfc.vuejs.org/

Steps to reproduce

Set an attribute that matches on a plain HTML element inside the template.

A quick example:

<template>
  <a text="something" />
</template>

What is expected?

The output matches the input, in this example it should return

  <a text="something" />

What is actually happening?

It overrides the property of that element, and for the anchor element text works like innerText. The result is:

  <a>something</a>

The first time I've encountered this behaviour was setting focus attribute on the input element, resulting in the focus() method being shadowed. I was using Vue 2 at that time.

<component :is="tag" v-for="tag in tags" :^text="tag" :innerText="tag" />

It doesn't play nice with typescript and I kind of need to use text attribute name. I'm using windicss / unocss and those have this thing called attributify mode, that lets you group tailwind classes under one attribute (text | bg | border | font etc). It can be set up, so those attributes have some prefix, and I've actually had it already setup that way. I just don't think that the way this behaves now is "correct". Especially since this happens only for existing properties - other attributes won't create new properties.

Setting properties when they exist is intended behavior, you can force an attribute with .attr:

 <component :is="tag" v-for="tag in tags" :text.attr="tag" :innerText="tag" />

https://vuejs.org/api/built-in-directives.html#v-bind