Closed tamis-laan closed 3 years ago
This is because lit-html currently does not modify the value passed to an attribute before calling setAttribute
. This means an explicit null
or undefined
is directly passed to setAttribute
where the value is coerced to a string (e.g. to "null"
and "undefined"
). These strings then become NaN
when converted to a number.
If you want to avoid this conversion, you can bind to the property instead of the attribute (note the .
before the attribute in the example below that indicates the binding is to a property not an attribute):
<my-component .property=${null}>
Note, the attribute value behavior for null
and undefined
is being changed in the next major version of lit-html slated to be released soon. In the new version explicit null
and undefined
will be set to attributes as empty string values which will be coerced to 0 in this case.
Hope that helps. If more explanation is necessary please feel free to re-open issue.
Given a component with a property of type Number:
I can set the property to null or undefined i.e.
component.property = null
. However if I set the property through a html attribute<my-component property=${null} />
the property becomesNaN
.Why is this? Why are
null
andundefined
converted toNaN
? I can understand that passing a string like"test"
would be converted toNaN
but notnull
andundefined
. These are useful values to have.