[lit-html] Do not stringify boolean values in child parts

Should this be an RFC?

• This is not a substantial change

Which package is this a feature request for?

Lit Core (lit / lit-html / lit-element / reactive-element)

Description

The following syntax is not supported in lit-html as it will render false to the screen when condition doesn't match:

html`<i>${condition && something}</i>`

lit-html's behavior of stringifying boolean values is not desirable. There is 0 benefit from rendering booleans as "false", which is also what lit docs point out:

A boolean value true will render 'true', and false will render 'false', but rendering a boolean like this is uncommon.

This quirk of lit-html makes migration from Stencil/React/Preact/Vue/Svelte or any other modern framework harder for no good reason - it is a source of bugs in production. Instead, modern rendering libraries ignore falsy values, which reduces the need for bottom values like nothing.

As an extension of https://github.com/lit/lit/issues/1559, I ask you to please reconsider the current behavior of rendering false to the screen.

Alternatives and Workarounds

I wrote a TypeScript transformer that tries to rewrite ${condition && something} into ${condition ? something : nothing} at build time. However, it doesn't catch all the cases, and adds complexity to our build pipeline.

It's no fun to see this in a production app 😓: