lwc
lwc copied to clipboard
Normalize global boolean attrs values passed to custom elements as props
Attribute values for custom elements that are set in the template are always set as properties; in the case of global boolean attributes (ex: hidden), there's a difference when the value passed is static vs the passed value being an expression:
- When the value is static, ex:
<x-foo hidden="3">
is transformed intohidden: true
prop - When the attribute is set to an expression, ex:
<x-foo hidden={bar}>
the template is transformed intohidden: $cmp.bar
prop.
The issue is that despite the hidden
attr/prop only allows boolean values, when is set via an expression, it can be set to other values different than true
or false
.
Describe the solution you'd like
We should normalize the property value passed to the custom element, modifying the compiled code to hidden: !!$cmp.bar
, in such way will match with how static attributes are converted to properties and will match the spec.
Note: today you can pass any value, therefore for a component with an api attribute hidden that is receiving other than boolean values, this change will be breaking change.