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.
<PureComponent id="foobarbaz" />,
          ));
        it('should reconnect Bare Element to Pure Component', () =>
          expectMarkupMatch(<PureComponent id="foobarbaz" />, bareElement));
        it('should reconnect ES6 Class to Bare Element', () =>
          expectMarkupMatch(bareElement, <ES6ClassComponent id="foobarbaz" />));
        it('should reconnect Pure Component to Bare Element', () =>
          expectMarkupMatch(bareElement, <PureComponent id="foobarbaz" />));
        it('should reconnect Bare Element to Bare Element', () =>
          expectMarkupMatch(bareElement, bareElement));
      });
      it('should error reconnecting different element types', () =>
        expectMarkupMismatch(<div />, <span />));
      it('should error reconnecting missing attributes', () =>
        expectMarkupMismatch(<div id="foo" />, <div />));
      it('should error reconnecting added attributes', () =>
        expectMarkupMismatch(<div />, <div id="foo" />));
      it('should error reconnecting different attribute values', () =>
        expectMarkupMismatch(<div id="foo" />, <div id="bar" />));
    });
    describe('inline styles', function() {
      it('should error reconnecting missing style attribute', () =>
        expectMarkupMismatch(<div style={{width: '1px'}} />, <div />));
      it('should error reconnecting added style attribute', () =>
        expectMarkupMismatch(<div />, <div style={{width: '1px'}} />));
      it('should error reconnecting empty style attribute', () =>
        expectMarkupMismatch(
          <div style={{width: '1px'}} />,
          <div style={{}} />,
        ));