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?
return String(str).replace(/([.?*+\^$\[\]\\(){}|-])/g, '\\$1');
    }
    function expectToHaveAttribute(actual, expected) {
      const [attr, value] = expected;
      let re = '(?:^|\\s)' + attr + '=[\\\'"]';
      if (typeof value !== 'undefined') {
        re += quoteRegexp(value) + '[\\\'"]';
      }
      expect(actual).toMatch(new RegExp(re));
    }
    function genMarkup(props) {
      return ReactDOMServer.renderToString(<div {...props} />);
    }
    it('should generate the correct markup with className', () => {
      expectToHaveAttribute(genMarkup({className: 'a'}), ['class', 'a']);
      expectToHaveAttribute(genMarkup({className: 'a b'}), ['class', 'a b']);
      expectToHaveAttribute(genMarkup({className: ''}), ['class', '']);
    });
    it('should escape style names and values', () => {
      expectToHaveAttribute(
        genMarkup({
          style: {'b&ckground': '<3'},
        }),
        ['style', 'b&amp;ckground:&lt;3'],
      );
    });
  });
  describe('createContentMarkup', () => {
    function quoteRegexp(str) {