I have super simple lit element and I'm trying to have a closed or open icon based on isOpen reactive property. Clicking on the element sets this.isOpen = !this.isOpen
, which should cause an update. Unfortunately, clicking on the button doesn't cause a re-render. Any ideas why this is happening? Console.log
logs out true false true false tue
correctly when spamming clicks.
edit: changed isOpen to a string open
and closed
. No effect.
edit2: changed isOpen to @state()
. No effect.
edit3: added this.requestUpdate()
and it works. But it makes no sense! What is so "reactive" about "reactive" properties if changing them doesn't cause a re-render
or even trigger lifecycle methods
??????
@customElement('header-top')
export class HeaderTop extends LitElement {
static styles = css`
:host {
display: block;
}
:host([hidden]) {
display: none;
}
.settings-btn {
display: inline-block;
width: 2rem;
height: 2rem;
fill: white;
cursor: pointer;
padding: 0;
margin: 0;
border: none;
background: none;
}
.settings-btn:hover {
}
`;
@property({ type: Boolean })
isOpen = false;
public render() {
console.log(no-rerender).
return html`<header>
<nav>
${this.isOpen
? html`<button
class="settings-btn close"
@click="${this._openOrCloseMenu}"
>
<i>${close}</i>
</button>`
: html`<button
class="settings-btn open"
@click="${this._openOrCloseMenu}"
>
<i>${equalizer}</i>
</button>`}
</nav>
</header>`;
}
public _openOrCloseMenu(e: Event) {
console.log(this.isOpen); // triggers
this.isOpen = !this.isOpen;
}
}