johan-gorter
commented
1 year ago DOM elements have both attributes and properties. Usually an attribute is value mirrorred to the property and vice-versa. All boolean HTML attributes happen to have a boolean property as well that you can get/set. This is the reason why maquette treats VNodeProperties with true/false values as property and not as an attribute.
If you open devtools and inspect your button, you will see that $0['data-attribute-bool'] returns true/false.
If you really need attributes (and just a property does not suffice) you can:
- use strings "true" "false"
- use a custom element that mirrors the property to the attribute (like https://lit.dev/docs/components/properties/)
As stated by the HTML spec there are a number of attributes which are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.
Now there's no way for maquette to have an attribute dynamically added and deleted based on the state of a variable. I've included a codesandbox sample to illustratie the issue: https://codesandbox.io/s/floral-thunder-wlh2s5