Tengo un elemento iluminado súper simple y estoy tratando de tener un ícono cerrado o abierto basado en la propiedad reactiva isOpen. Al hacer clic en el elemento, se establece this.isOpen = !this.isOpen , lo que debería provocar una actualización. Desafortunadamente, al hacer clic en el botón no se vuelve a procesar. ¿Alguna idea de por qué sucede esto? Console.log la sesión true false true false tue correctamente cuando hace clic en spam.

editar: cambió isOpen a una cadena open y closed . Sin efecto.
edit2: cambió isOpen a @state() . Sin efecto.
edit3: agregó this.requestUpdate() y funciona. ¡Pero no tiene sentido! ¿Qué tienen de "reactivas" las propiedades "reactivas" si cambiarlas no provoca una re-render o incluso desencadena lifecycle methods de vida?

 @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; } }