10.0.0-alpha.1 - Passing tagName as a (redundant) prop to an HTML node causes an error

Passing tagName as a prop like:

export default function () {
  return <button tagName='button' />
};

Will result in an error like:

E-v1.js:formatted:10882 Uncaught (in promise) TypeError: Cannot assign to read only property 'tagName' of object '#<HTMLButtonElement>'
    at w (E-v1.js:formatted:10882)
    at g (E-v1.js:formatted:10859)
    at A (E-v1.js:formatted:10999)
    at _ (E-v1.js:formatted:10953)
    at _ (E-v1.js:formatted:10948)
    at _ (E-v1.js:formatted:10948)
    at d (E-v1.js:formatted:10816)
    at A (E-v1.js:formatted:11001)
    at _ (E-v1.js:formatted:10953)
    at _ (E-v1.js:formatted:10948)

I noticed this because I have a (sloppy but allowed) pattern in a couple places where we have custom elements (not shown in example), and specify tagName like so:

class CustomElement extends Component {
  render () {
    const TagName = this.props.tagName;
    return <TagName {...this.props} />;
  }
}
render(<CustomElement tagName='button' class='the-class'>...</CustomElement>, parentEl);

To accommodate this, I need to explicitly remove tagName from props before passing it down. This can be solved like const propsToPass = Object.assign({}, this.props); delete propsToPass.tagName, but it’s not a convenient pattern. Still, I think it might still be okay to leave it as is, as long as it’s mentioned as a breaking change. Thoughts?

[developit]

That would be pretty expensive. If supporting a tagName prop/attribute is important, it can be added to the list of skipped keys here:

https://github.com/developit/preact/blob/ddab4781de763465a641a7022d3f686ba88197dc/src/diff/props.js#L82

This will set it as an attribute, which seems logical.

[JoviDeCroock]

We could introduce a delete tagName before we stick everything to the native node but that decision is not up to me