Since react-templates automatically turns the class attribute into className it's not possible to define a working class attribute on custom elements (e.g. WebComponents).
Example:
<my-div class="red"></my-div>
generates:
var templateRT = function () {
return React.createElement('my-div', { 'className': 'red' });
};
TLDR: Custom elements DO work in React. You must use class instead of className because the custom element spec requires that we allow users to specify a className attribute and we need to preserve that functionality for custom elements.
As a fix for this, I suggest that we map back className into class for custom elements.
Since
react-templates
automatically turns theclass
attribute intoclassName
it's not possible to define a working class attribute on custom elements (e.g. WebComponents).Example:
generates:
which doesn't work because custom elements in react expect a
class
attribute instead ofclassName
, as explained in https://github.com/facebook/react/issues/4933:As a fix for this, I suggest that we map back
className
intoclass
for custom elements.