renderToStaticMarkup output has inconsistent attributes case

[sbekrin]

Hey there! It seems to be minor issue for web, since browsers normalises attribute cases on their end, but e.g. it is a major issue for email-targeted markup which results in buggy behaviour across some clients.

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

Potential Bug

What is the current behavior?

Some attribute names are converted to lowercase, and some are not:

import React from "react";
import { renderToStaticMarkup } from "react-dom/server";

// Sample use-case, not an actual code
// Notice that first 3 props are lowercased in result, but next 3 are not
console.log(
  renderToStaticMarkup(
    <table
      contentEditable
      tabIndex="1" 
      autoFocus
      autoCapitalize="true"
      cellPadding={10}
      cellSpacing={10}
    />
  )
);

Code above outputs next result:

<table contenteditable="true" tabindex="1" autofocus="" autoCapitalize="true" cellPadding="10" cellSpacing="10"></table> 

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:

What is the expected behavior?
All attribute names are lowercased, e.g.:

<table contenteditable="true" tabindex="1" autofocus="" autocapitalize="true" cellpadding="10" cellspacing="10"></table> 

Based on supported html attributes docs section I couldn't find a pattern on whenever React decides when to lowercase the name and when not. Both tabIndex and cellPadding are listed, but only first one outputted as expected.

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

[email protected]
[email protected]

Haven't tried with older React / ReactDOM versions.

Updated: I found related issue #10863, but my argument would be more about compat issues with mails. It's definitely an edge case thought.

[aweary]

I'm going to just defer to #10863. ReactDOM is meant to render HTML, and according to the HTML spec attributes are case insensitive. If some mail clients don't respect that then they're non-compliant with the spec. There's no intention to make ReactDOM a general XML renderer.

You always make your own HTML-like renderer 🙂