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

[marceloadsj]

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>

[michalczaplinski]

If you set an is prop on a react component, react treats it as a Custom Element.

https://github.com/facebook/react/blob/master/packages/react-dom/src/shared/isCustomComponent.js#L12

Because of this, props like className or htmlFor are not translated to class and for because you might have an attribute with that same name (like className or htmlFor) used by your custom element.

The documentation mentions this briefly https://reactjs.org/docs/web-components.html

One common confusion is that Web Components use “class” instead of “className”.

I can agree that it's def a bit confusing 😅

[bvaughn]

@michalczaplinski is correct! The is attribute is an HTML standard thing:

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/is

The is global attribute allows you to specify that a standard HTML element should behave like a defined custom built-in element (see Using custom elements for more details).

In this case, I think React DOM is behaving reasonably (although I understand why it could be a bit surprising too)

[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 :smile:

[marceloadsj]

Maybe would be good to have a section on docs saying about this. What do you think?

It's hard to search because of the word "is", so, if we add a FAQ explaining, it will avoid that kind of issues being opened.

I just opened because I didn't find anything on docs or github issues, searching for keywords like "prop html tag is className attribute".

:)

[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