Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DOM attribute dateTime isn't lowercased when rendered to string #11492

Closed
larsnystrom opened this issue Nov 8, 2017 · 1 comment
Closed

DOM attribute dateTime isn't lowercased when rendered to string #11492

larsnystrom opened this issue Nov 8, 2017 · 1 comment

Comments

@larsnystrom
Copy link

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

What is the current behavior?
The DOM property dateTime isn't converted to its lowercase attribute counterpart datetime for the <time> element when the element is rendered with ReactDOMServer.renderToString().

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template for React 16: https://jsfiddle.net/Luktwrdm/, template for React 15: https://jsfiddle.net/hmbg7e9w/).

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

const markup = ReactDOMServer.renderToString(React.createElement('time', {
	dateTime: "2017-11-02T20:49:25+01:00"
}));
console.log(markup);

The above will print <time dateTime="2017-11-02T20:49:25+01:00" data-reactroot=""></time>.

What is the expected behavior?

The above output should be <time datetime="2017-11-02T20:49:25+01:00" data-reactroot=""></time>.

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

React 16.0.0
React DOM 16.0.0
Node v6.11.5

larsnystrom added a commit to larsnystrom/react-time that referenced this issue Nov 8, 2017
Note that some tests will fail due to
facebook/react#11492
@gaearon
Copy link
Collaborator

gaearon commented Nov 8, 2017

This is a duplicate of #10863.

We’re hesitant about this. HTML is case-insensitive so technically our behavior is correct even if a little surprising. There's absolutely nothing wrong with emitting attributes with any casing, even DaTeTiMe would be perfectly understood by browsers, and the difference would be completely unobservable for the client-side code.

Though we potentially can “fix” this to be less surprising (#11110) we’re not confident it won’t lead to a slight performance regression. So it might not be worth it. We’d need data from people using SSR in production to tell if this would be a problem or not.

@gaearon gaearon closed this as completed Nov 8, 2017
silvenon added a commit to silvenon/eslint-plugin-react that referenced this issue Jun 29, 2018
The attribute "charset" was considered an error, but it results in valid
HTML because HTML is case-insensitive. In other words, these two lines
will be interpreted in the same way:

<meta charSet="utf-8" />
<meta charset="utf-8" />

facebook/react#11492 (comment)
silvenon added a commit to silvenon/eslint-plugin-react that referenced this issue Jun 29, 2018
The attribute "charset" was considered an error, but it results in valid
HTML because HTML is case-insensitive. In other words, these two lines
will be interpreted in the same way:

<meta charSet="utf-8" />
<meta charset="utf-8" />

facebook/react#11492 (comment)
ljharb pushed a commit to kentcdodds/eslint-plugin-react that referenced this issue Jul 3, 2018
The attribute "charset" was considered an error, but it results in valid
HTML because HTML is case-insensitive. In other words, these two lines
will be interpreted in the same way:

<meta charSet="utf-8" />
<meta charset="utf-8" />

facebook/react#11492 (comment)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants