Weird behaviour when 'is' prop is present

[amertak]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
I have this example

https://jsfiddle.net/69z2wepo/48030/

ReactDOM.render(
  React.createElement('div', { 'key': 42, 'className': 'foo', 'is': '' }, 'Test'),
  document.getElementById('container')
);
// Renders <div data-reactroot="" classname="foo" is="">Test</div>

ReactDOM.render(
  React.createElement('div', { 'key': 42, 'className': 'foo' }, 'Test'),
  document.getElementById('container2')
);

// Renders <div data-reactroot="" class="foo">Test</div>

As you can see, adding the 'is' prop breaks the rendering of class prop (maybe other parameters as well)
What is weird, that is is not reserved word in JS.

How I got the is prop there is another story, but this behaviour is definitely weird.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
v15.0.1 and Chrome, not tested other

[gaearon]

I don’t know it too well but I think this is by design. is prop means you are declaring a Custom Element, for example:

<div is="x-component"></div>

// works thanks to:
var XComponent = document.registerElement('x-component', {
  extends: 'input',
  prototype: Object.create(HTMLInputElement.prototype)
});

This is not a React feature. Some people wanted better interoperability between React and Custom Elements (part of Web Components specs). We recommend using React components and composition but you are welcome to try Web Components if you like, and we try to play nice with them.

However, once we’re in Web Components mode, we can’t reliably say that className should be translated to class because custom Web Components can have a (potentially unrelated) attribute called className, and we should respect that. So once you specify is=..., you’re in this mode, and className no longer becomes class. You can read more about this in #4933.

In your case, you probably didn’t mean to use is attribute to enter Web Components mode. So you should be able to just stop passing it as a prop, and you’ll get a regular <div>.

I hope this helps!

[amertak]

Thanks, that makes sense :)