Native modifier for props

What problem does this feature solve?

Consider the following component

<template>
 <div>
  {{title}}
 </div>
</template>

<script>
export default {
  name: 'awesomeTitle',
  props: {
    title: String
  }
}
</script>

When using this component it now becomes impossible to set the title html attribute on the div

<awesomeTitle title="Hello world" title.native="Oopsy"/>

This would just output

<div title.native="Oopsy">Hello world</div>

Instead of

<div title="Oopsy">Hello world</div>

Adding the native modifier for props would permit to avoid collision between html attributes and vue props. It already exists for event listeners so it would also be more coherent.

Sometime libraries will forget that html attributes inheritance is a thing and adding some html attributes becomes impossible in those components, it will also make the component more future proof in case new html attributes are added in the spec as you don’t have to worry about future collisions anymore

What does the proposed API look like?

<awesomeTitle title="Hello world" title.native="Oopsy"/>

[posva]

Using a prop with the same name as a native attribute when you want to allow that attribute is confusing. But I think this is worth going through an RFC to gather feedback: https://github.com/vuejs/rfcs

[Thanarathanam]

Can you add ‘hacktoberfest’ topic to the repository? It will make this repository participating in hacktoberfest.