Have boolean properties set/remove attributes

[asyncliz]

I think boolean properties should behave like boolean attributes. If the value is true, the attribute exists, and does not exist if the value is false.

Right now, boolean props will set prop="false" or prop="true", which isn't usually the use case for webcomponents.

const VaadinButton = adapt('vaadin-button');

let isDisabled = false;
ReactDOM.render(
  <VaadinButton disabled={isDisabled} />, 
  document.querySelector('#root')
);

The above renders a disabled button:

<vaadin-button disabled="false"></vaadin-button>

[smalluban]

I would recommend setting the property value first (you can check if it exists in the prototype chain when adapt() is called). The web components might choose if they reflect attribute value or not, and it is always faster to use properties instead of attributes.

You can follow rules of the template engine of the hybrids library - https://hybrids.js.org/template-engine/properties-and-attributes. It at first tries to set property, if not found, then fallbacks to the corresponding attribute name.