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?
<my-custom-element
          onstring={'hello'}
          onobj={{hello: 'world'}}
          onarray={['one', 'two']}
          ontrue={true}
          onfalse={false}
        />,
        container,
      );
      const customElement = container.querySelector('my-custom-element');
      expect(customElement.getAttribute('onstring')).toBe('hello');
      expect(customElement.getAttribute('onobj')).toBe('[object Object]');
      expect(customElement.getAttribute('onarray')).toBe('one,two');
      expect(customElement.getAttribute('ontrue')).toBe('true');
      expect(customElement.getAttribute('onfalse')).toBe('false');
      
      customElement.dispatchEvent(new Event('string'));
      customElement.dispatchEvent(new Event('obj'));
      customElement.dispatchEvent(new Event('array'));
      customElement.dispatchEvent(new Event('true'));
      customElement.dispatchEvent(new Event('false'));
    });
    it('custom elements should still have onClick treated like regular elements', () => {
      let syntheticClickEvent = null;
      const syntheticEventHandler = jest.fn(
        event => (syntheticClickEvent = event),
      );
      let nativeClickEvent = null;
      const nativeEventHandler = jest.fn(event => (nativeClickEvent = event));
      function Test() {