When crossOrigin prop is provided the rendered prop should be lowercase

[timneutkens]

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

Potential bug

What is the current behavior?

When using:

<script crossOrigin="anonymous">

It will be rendered as

<script crossOrigin="anonymous" data-reactroot=""></script>

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

const React = require('react')
const ReactDom = require('react-dom/server')

const result = ReactDom.renderToString(
  React.createElement('script', {
    crossOrigin: 'anonymous'
  })
)

console.log(result)

What is the expected behavior?

The w3c spec as well as MDN docs refer to crossorigin being lowercased, I'm not sure if this affects anything as most of the html parsers I tried while investigating (w3c validator and cheerio) worked fine with crossOrigin not being lowercase.

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

The reproduction uses latest React (yarn add react react-dom)

[gaearon]

It doesn't matter because HTML spec treats attributes as insensitive to the casing. Which lets us avoid some runtime work in React.

[timneutkens]

Awesome 👍

[upsuper]

This doesn't work for SVG. Attribute names on SVG elements are case-sensitive, thus crossOrigin is not going to work.

Maybe reopen this issue?

[upsuper]

You can see this example for the issue (under Chrome, since Firefox hasn't added support for crossorigin on SVG elements): https://jsfiddle.net/upsuper/y9q5fp3t/