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?
throw new TypeError('prod message');
        }
        toString() {
          return '2020-01-01';
        }
      }
      const style = {fontSize: new TemporalLike()};
      const div = document.createElement('div');
      const test = () => ReactDOM.render(<span style={style} />, div);
      expect(() =>
        expect(test).toThrowError(new TypeError('prod message')),
      ).toErrorDev(
        'Warning: The provided `fontSize` CSS property is an unsupported type TemporalLike.' +
          ' This value must be coerced to a string before before using it here.',
      );
    });
    it('should update styles if initially null', () => {
      let styles = null;
      const container = document.createElement('div');
      ReactDOM.render(<div style={styles} />, container);
      const stubStyle = container.firstChild.style;
      styles = {display: 'block'};
      ReactDOM.render(<div style={styles} />, container);
      expect(stubStyle.display).toEqual('block');
    });
    it('should update styles if updated to null multiple times', () => {
      let styles = null;
      const container = document.createElement('div');