Boolean attributes on standard HTML Elements are set to true by adding the attribute to the element. The absence of the attribute defaults the attribute to false. Therefore, the default value of an attribute is always false. Lightning web components use the same principle for boolean properties.
Always set the default value for a boolean public property to false. If you set the default value to true instead in bool.js, there’s no way to statically toggle the value to false in markup.
1// bool.js
2import { LightningElement, api } from "lwc";
3
4export default class Bool extends LightningElement {
5 @api show = false;
6}Here’s the HTML file.
1<!-- bool.html -->
2<template>
3 <p>show value: {show}</p>
4</template>The parent component includes c-bool, which displays the default value of false because the show attribute isn’t added to <c-bool>.
The only way to specify false in markup is to omit the boolean attribute. Setting show="false" in markup evaluates to true.
Important
1<!-- parent.html -->
2<template>
3 <c-bool></c-bool>
4</template>To set the show property to true, add a show attribute with an empty value to the markup. This version of c-parent displays a value for true for the show property.
1<!-- parent.html -->
2<template>
3 <c-bool show></c-bool>
4</template>The value of show is true, but a show attribute isn’t reflected in the rendered HTML unless you explicitly reflect it by calling setAttribute. See Reflect JavaScript Properties to HTML Attributes.
When a boolean attribute’s value is true, the rendered HTML is <my-component my-attribute>.
Note
To toggle the value dynamically, pass down a dynamic computed value from the parent component. For example:
1<!-- parent.html -->
2<template>
3 <c-bool show={computedValue}></c-bool>
4</template>Use a JavaScript getter in parent.js to return the value of {computedValue}.
See Also
Release Preview
j