How does the @property({type: Boolean}) actually work ? #4395

jonathanfady · 2023-11-13T09:04:52Z

jonathanfady
Nov 13, 2023

Hi !

I can't really wrap my head around what is written in the Lit Documentation about the default converter and the Boolean type...

Lit Conversion Type

This is the playground code I am trying to figure out:

import {html, css, LitElement} from 'lit';
import {customElement, property} from 'lit/decorators.js';

@customElement('simple-greeting')
export class SimpleGreeting extends LitElement {
  static styles = css`p { color: blue }`;

  @property()
  name = 'Somebody';

  @property({type: Boolean})
  visible: boolean;
  
  @property({type: Boolean})
  disabled = false;
  
  render() {
    console.log(this.name, this.visible, this.disabled);
    return html`<p>Hello, ${this.name}! ${this.visible} ${this.disabled}</p>`;
  }
}

<!DOCTYPE html>
<head>
  <script type="module" src="./simple-greeting.js"></script>
</head>
<body>
  <simple-greeting name="World"></simple-greeting>
</body>

As per the documentation, shouldn't my visible property be initialized with false ? Why is it still undefined ? What am I missing ?

Here is the documentation about boolean properties:

If the element has the corresponding attribute, set the property to true.
If not, set the property to false.

If property is truthy, create the attribute and set its value to an empty string.
If property is falsy, remove the attribute

Here is a link to the playground:
Lit Playground

justinfagnani · 2023-11-13T13:52:18Z

justinfagnani
Nov 13, 2023
Maintainer

You still need to initialize boolean properties. visible isn't initialized, so according to standard JavaScript semantics, it's value is undefined.

{type: Boolean} affects how the default attribute converter works, so that if you remove an attribute it'll set the property to false. But in this case you haven't removed an attribute.

0 replies

jonathanfady · 2023-11-13T14:20:41Z

jonathanfady
Nov 13, 2023
Author

Hi Justin,

Thanks for your answer !
Could you then please explain what is written in your documentation ?

Boolean: If the element has the corresponding attribute, set the property to true.
If not, set the property to false.

For any case except Boolean, if the element doesn't have the corresponding attribute, the property keeps its default value, or undefined if no default is set.

When do these use cases happen ? Do you have some example ? I feel that in my case my element fullfills exactly these prerequisites of having the visible property of type Boolean and not having the corresponding attribute.

2 replies

tbroyer Nov 13, 2023

The key is that this is actually only triggered when the attributes change; so “doesn't have the corresponding attribute” actually means “no longer has the corresponding attribute”.
Lit won't compute any initial property value based on the state of attributes when the element is created/updated, so it will only detect the absence of an attribute if it was present and has been removed. Before that, the property just has its initial value.

This is in line with:

By default, Lit sets up an observed attribute corresponding to each public reactive property, and updates the property when the attribute changes.

— Attributes

and

For a boolean property to be configurable from an attribute, it must default to false. If it defaults to true, you cannot set it to false from markup, since the presence of the attribute, with or without a value, equates to true. This is the standard behavior for attributes in the web platform.

— Boolean attributes

(but maybe the docs could make it clearer)

jonathanfady Nov 13, 2023
Author

Hi Thomas !
Thanks for your reply. Yeah I guess with the other pieces of documentation and everything put together, the behavior makes sense. It wasn't very clear for me regarding initial values, but it could be just my understanding.

Thanks a lot !

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How does the @property({type: Boolean}) actually work ? #4395

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 2 replies

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

How does the @property({type: Boolean}) actually work ? #4395

jonathanfady Nov 13, 2023

Replies: 2 comments · 2 replies

justinfagnani Nov 13, 2023 Maintainer

jonathanfady Nov 13, 2023 Author

tbroyer Nov 13, 2023

jonathanfady Nov 13, 2023 Author

jonathanfady
Nov 13, 2023

Replies: 2 comments 2 replies

justinfagnani
Nov 13, 2023
Maintainer

jonathanfady
Nov 13, 2023
Author

jonathanfady Nov 13, 2023
Author