Entonces, trato de hacer que 2 componentes (una barra de navegación y un menú personalizado) se comuniquen entre sí, sabiendo que el menú no es un elemento secundario de la navegación. Dentro del navegador, tengo un botón de hamburguesa y cuando lo presiono, quiero mostrar el menú, pero no pude encontrar una manera de activar una señal en el componente de navegación, para que el menú pueda alcanzarlo y cambiar su estilo según a esa "señal". La única forma en que podía hacer que sucediera era poner el menú en el componente de navegación y trabajar con él allí, pero quiero que sea independiente. ¿Alguna idea de cómo podría hacer que eso suceda? ¿Cómo hacer que 2 componentes independientes se comuniquen usando Lit?
La mejor manera de hacerlo es usando CustomEvents. Debe enviar el evento en el elemento de la ventana en el método de hamburguesa @click , así:
<my-hamburger @click="${() => { window.dispatchEvent(new CustomEvent('hamburger-clicked')); }"> </my-hamburger>Y, por supuesto, necesita escuchar este evento en el menú personalizado, y lo hace usando el método connectedCallback , así:
connectedCallback() { super.connectedCallback(); window.addEventListener('hamburger-clicked', this.showMenu); // here you need to pass the function responsible for showing menu } disconnectedCallback() { window.removeEventListener('hamburger-clicked', this.showMenu); super.disconnectedCallback(); }Lo que entiendo de la descripción del código y la estructura del componente es lo siguiente:
Contenedor de navegación
barra de navegación y menú personalizado, ambos son los componentes secundarios de Navigation Container. Lo que puede hacer es activar un evento personalizado desde la barra de navegación y escucharlo. Contenedor de navegación. También debe pasar una propiedad en el menú personalizado para mostrar/ocultar el menú, que se cambiará en función del evento personalizado pasado al contenedor de navegación desde la barra de navegación.
import {LitElement, html} from 'lit-element'; // your Navigation Continer class MyElement extends LitElement { static get properties() { return { showHideMenu: {type: Boolean}, //property to be send in menu component }; } constructor() { super(); this.showHideMenu = false; } _handleShowHide(e){ // change showHideMenu property on the basis of recieved value } render() { return html` <nav-bar @handleShowHideEvent="${this._handleShowHide}" > </nav-bar> <menu .showhide=${this.showHideMenu} ></menu> `; } } customElements.define('my-element', MyElement);Puede consultar el código anterior, aunque hay más por hacer aparte de esto. Como si necesita enviar y manejar la barra de navegación del evento ShowHideEvent (en su menú, haga clic) y también necesita leer la propiedad showhide en su componente de menú.