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?
});
      itRenders(
        'no unknown data- attributes with casing and null value',
        async render => {
          const e = await render(<div data-fooBar={null} />, 1);
          expect(e.hasAttribute('data-foobar')).toBe(false);
        },
      );
      itRenders('custom attributes for non-standard elements', async render => {
        
        
        
        
        
        
        expect(() => {
          ReactDOM.render(<nonstandard />, document.createElement('div'));
        }).toErrorDev('The tag <nonstandard> is unrecognized in this browser.');
        const e = await render(<nonstandard foo="bar" />);
        expect(e.getAttribute('foo')).toBe('bar');
      });
      itRenders('SVG tags with dashes in them', async render => {
        const e = await render(
          <svg>
            <font-face accentHeight={10} />
          </svg>,
        );
        expect(e.firstChild.hasAttribute('accentHeight')).toBe(false);
        expect(e.firstChild.getAttribute('accent-height')).toBe('10');
      });