3

I want to pass a boolean value (true/false) to a lit component via. the dom. I'm having issues because it is always converted to true, I cant seem to find a good example for this in the lit documentation.

So basically:

<my-element foo="false" />
...
  @property({type: Boolean})
  foo: boolean;

What I tried allready is try to pass: "${false}"

I created a lit playground link with an example here

gries
  • 1,135
  • 6
  • 29
  • 1
    Can you wrap it in some object as in answer [here](https://stackoverflow.com/questions/60678891/how-can-i-change-a-boolean-property-in-lit-element-to-hide-content-on-my-compone)? – Adrian Kokot Jul 04 '23 at 12:37
  • I mean yes I could but I was hoping for a "cleaner" way of doing this, but thanks for the workarround :) – gries Jul 04 '23 at 12:45

1 Answers1

1

In HTML, boolean attributes are dictated by whether they are present or not, not by the string value.

You should simply omit the attribute:

<my-element></my-element>

And default the property to false:

class MyElement extends LitElement {
  @property({type: Boolean})
  foo: boolean = false;
}

If you're writing markup within lit-html templates, you can use the boolean attribute expression.

let foo = false;
html`<my-element ?foo=${foo}></my-element>`;
Augustine Kim
  • 841
  • 1
  • 5