Bug: Prop with name "is" breaks the className prop on tag

If you add a prop named “is” together with a “className” prop, on a html tag component (e.g. <div is="p" className="text-red">) it “breaks” the markup and render an attribute “classname” instead of “class”.

React & React DOM version: 16.12.0

Steps To Reproduce

1. Write a simple component that render a html tag
2. Add a prop named “is” and a “className”
3. Check the rendered markup

Link to code example: https://codesandbox.io/s/quiet-sun-535rg

Example: <div is="p" className="text-red">I'm not red</div>

The current behavior

Injecting the props as html attrs.

Markup: <div is="p" classname="text-red">I'm not red</div>

The expected behavior

Markup: <div is="p" class="red">I'm red</div>

[bvaughn]

Sure, if you have ideas for how to improve the docs page send them our way.

This page: https://reactjs.org/docs/web-components.html

Is here: https://github.com/reactjs/reactjs.org/blob/master/content/docs/web-components.md

[bvaughn]

This issue has come up a few times in the past:

• #12810
• #8419
• #7200

Dan’s comment seems inline with ours above: https://github.com/facebook/react/issues/7200#issuecomment-230780250

There’s also been some extensive discussion about the className property on web components here: #4933

Our web component docs suggest using a class attribute in such cases, as confirmed by this comment.

I’m going to close this issue since I think it’s all been discussed before 😄