Warn for unknown non-lowercase attributes

[gaearon]

It seems problematic to allow arbitary non-lowercase attribute on HTML nodes. Because the server has no ability to keep them case sensitive (HTML isn't). So they will end up different on the client.

We should probably warn if the attribute is not a known one and is not lowercase.

[nhunzaker]

What problems does case-sensitivity pose between the server and the client? The only one I encountered was hydration diffing, but I thought I corrected that by making sure all of the attribute checks were case-insensitive:

https://github.com/facebook/react/blob/master/src/renderers/dom/fiber/ReactDOMFiberComponent.js#L901

(and subsequent lowercasings)

[sebmarkbage]

If you use custom attributes on custom-elements or not custom elements (e.g. RDF, Angular stuff, etc) then the way you read them is through getAttribute or monitoring attribute mutation. Those are all lower-cased. It would seem like it works in one case but it wouldn't work in the other case. E.g. if you read lower-case but render upper-case then it will work on a server-hydrated view, but not if that same view is rendered on the client (e.g. due to an update). The opposite scenario is also problematic.

There is also no known use case for camel-cased custom attributes since extensions are all encouraged to use lower-case.

Another issue is that if we add something to the whitelist as camel-case, when it is already used as an invalid attribute then fixing the camel-case form will change behavior of previous ones. I just noticed this with itemScope.

[nhunzaker]

Thank you for explaining. This makes sense.