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
<awesomeTitle title="Hello world" title.native="Oopsy"/>
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
.prop seems to work, but only with binding, not sure if it's intended
https://codepen.io/jkarczm/pen/rNeLyLG?editors=1010
@jacekkarczmarczyk Pretty sure it's not and is just a weird side effect but at least this issue got a very hackish workaround for now
@jacekkarczmarczyk Modifiers for props only seem to apply for bindings and not normal attribute, seems like a bug in which case this issue could be solved using the prop modifier which apparently already exist
The prop modifier is not a hack. It will work with attributes that have a property equivalent
@posva I just mean it's hackish that it works only with binding so you have to use quotes and single quote
Can you add 'hacktoberfest' topic to the repository? It will make this repository participating in hacktoberfest.
Most helpful comment
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