React: React 16 does not lowercase HTML attributes in generated HTML

Created on 27 Sep 2017 · 7Comments · Source: facebook/react

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

Bug

What is the current behavior?

ReactDOMServer generates camelCased markup for the cellSpacing and cellPadding attributes:

<table cellSpacing="1" cellPadding="2"></table>

(Here's an example pen: https://codepen.io/anon/pen/jGBLdP)

I believe these attributes are canonically lowercased. If I lowercase the attributes in JSX, React warns that I'm not using the right names:

Warning: Invalid DOM property `cellpadding`. Did you mean `cellPadding`?

What is the expected behavior?

The attribute names would be rendered lowercase:

<table cellspacing="1" cellpadding="2"></table>

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

This is in 16.0.0. Prior versions of React stripped these attributes.

Server Rendering Wontfix Feature Request

Source

chromakode

Most helpful comment

Since HTML attributes are case-insensitive this should work as expected.

var div = document.createElement('div')
div.innerHTML = '<table cellSpacing="1" cellPadding="2"></table>'
// produces
<table cellspacing="1" cellpadding="2"></table>
div.cellPadding === "2" // true

thysultan on 27 Sep 2017

👍4

All 7 comments

Since HTML attributes are case-insensitive this should work as expected.

var div = document.createElement('div')
div.innerHTML = '<table cellSpacing="1" cellPadding="2"></table>'
// produces
<table cellspacing="1" cellpadding="2"></table>
div.cellPadding === "2" // true

thysultan on 27 Sep 2017

👍4

Yes, agreed. Though if there is an easy way to make React output these attributes lower-cased, that would be a more canonical way to format these (does it currently do this for any other attributes?)

chromakode on 27 Sep 2017

👍1

Seems like it doesn't matter in practice. Although I'm open to reviewing PRs that lowercase anything that is in HTML namespace.

gaearon on 27 Sep 2017

I'm tagging this as feature request because technically it's not a bug. But we can fix this.

gaearon on 3 Oct 2017

👍1

I decided not to fix this. Again, it's not a bug: technically HTML allows attributes to have any casing. We're strictly doing less work on React side, and it doesn't make sense to me to do more work to make the output more aesthetically consistent.

If you feel strongly about you're welcome to provide real-world benchmarks from sites heavily using SSR that demonstrate https://github.com/facebook/react/pull/11110 has no impact on perf. Then we could take it.

gaearon on 5 Jan 2018

Hey guys, not sure why but charSet makes the page shows invalid character code in some browsers (on iPhone), change it to all lowercase as charset and it works as normal. Now I must render them all to string and use replace to avoid this case.