When setting boolean attributes on Web Components
`<x-search somebool name={this.props.name} />`
they get rendered as attribute/value pairs instead
`<x-search somebool="true" name={this.props.name}>`

This causes problems with some AMP components, for eg. `<amp-iframe />` which has a `resizable` attribute that gets rendered as `resizable="true"`. This results in non valid AMP content and developers crying with blood tears on their keyboards :)
> The attribute 'resizable' in tag 'amp-iframe' is set to the invalid value 'true'. (see https://www.ampproject.org/docs/reference/components/amp-iframe)

Is there any reason for the current behaviour? Will changing this break something else?
).toErrorDev([
          '<hasOwnProperty /> is using incorrect casing. ' +
            'Use PascalCase for React components, ' +
            'or lowercase for HTML elements.',
          'The tag <hasOwnProperty> is unrecognized in this browser',
        ]);
      } finally {
        Object.prototype.toString = realToString; 
      }
    });
    it('should throw on children for void elements', () => {
      const container = document.createElement('div');
      expect(() => {
        ReactDOM.render(<input>children</input>, container);
      }).toThrowError(
        'input is a void element tag and must neither have `children` nor ' +
          'use `dangerouslySetInnerHTML`.',
      );
    });
    it('should throw on dangerouslySetInnerHTML for void elements', () => {
      const container = document.createElement('div');
      expect(() => {
        ReactDOM.render(
          <input dangerouslySetInnerHTML={{__html: 'content'}} />,
          container,
        );
      }).toThrowError(
        'input is a void element tag and must neither have `children` nor ' +
          'use `dangerouslySetInnerHTML`.',
      );