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.
const clientRenderOnBadMarkup = async (element, errorCount = 0) => {
  
  var domElement = document.createElement('div');
  domElement.innerHTML =
    '<div id="badIdWhichWillCauseMismatch" data-reactroot="" data-reactid="1"></div>';
  await renderIntoDom(element, domElement, true, errorCount + 1);
  
  var hydratedTextContent = domElement.textContent;
  
  const cleanDomElement = document.createElement('div');
  ExecutionEnvironment.canUseDOM = true;
  await asyncReactDOMRender(element, cleanDomElement, true);
  ExecutionEnvironment.canUseDOM = false;
  
  const cleanTextContent = cleanDomElement.textContent;
  
  expect(hydratedTextContent).toBe(cleanTextContent);
  
  throw new BadMarkupExpected();
};
function itRenders(desc, testFn) {
  it(`renders ${desc} with server string render`, () => testFn(serverRender));
  if (ReactDOMFeatureFlags.useFiber) {
    it(`renders ${desc} with server stream render`, () => testFn(streamRender));
  }
  itClientRenders(desc, testFn);
}
function itClientRenders(desc, testFn) {