This usually means that the user mixed up our lowercase/uppercase naming convention; see https://github.com/facebook/react/pull/3429#issuecomment-85166440.

We could add a message like

> Warning: The tag <commentBox> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

We'd check this only once per tag and only in development mode.

spyOn(console, 'error');
      for (var i = 0; i < 3; i++) {
        var container = document.createElement('div');
        var beforeUpdate = React.createElement('x-foo-component', {}, null);
        ReactDOM.render(beforeUpdate, container);
        var afterUpdate = React.createElement(
          'x-foo-component',
          {'blah" onclick="beevil" noise="hi': 'selected'},
          null,
        );
        ReactDOM.render(afterUpdate, container);
      }
      expectDev(console.error.calls.count()).toBe(1);
      expectDev(console.error.calls.argsFor(0)[0]).toEqual(
        'Warning: Invalid attribute name: `blah" onclick="beevil" noise="hi`',
      );
    });
    it('should update arbitrary attributes for tags containing dashes', () => {
      var container = document.createElement('div');
      var beforeUpdate = React.createElement('x-foo-component', {}, null);
      ReactDOM.render(beforeUpdate, container);
      var afterUpdate = <x-foo-component myattr="myval" />;
      ReactDOM.render(afterUpdate, container);
      expect(container.childNodes[0].getAttribute('myattr')).toBe('myval');
    });
    it('should clear all the styles when removing `style`', () => {
      var styles = {display: 'none', color: 'red'};
      var container = document.createElement('div');
      ReactDOM.render(<div style={styles} />, container);
      var stubStyle = container.firstChild.style;