Hice un componente de barra de búsqueda en javascrip
const template = document.createElement("template"); template.innerHTML = ` <div class="search"> <div className="searchIcon"> <img src="searchIcon.png" alt="search" width="13rem" /> </div> <input type="text" placeholder="Search" /> </div> `; class SearchBar extends HTMLElement { constructor() { super(); const el = this.attachShadow({ mode: "open" }); el.appendChild(template.content.cloneNode(true)); this.search = el.querySelector("input"); this.search.addEventListener("focus", () => { this.search.style.outline = "none"; }); } } customElements.define("search-bar", SearchBar);y luego creé otro componente donde traté de insertar mi barra de búsqueda personalizada:
const template = document.createElement("template"); template.innerHTML = ` <div class="navContainer"> <div class="titleContainer itemFlex"> <img src="arrow.png" alt="sageata" width="15rem" height="15rem" /> <h2 class="title">TITLURILE.RO</h2> </div> <div class="itemFlex searchContainer"> <search-bar></search-bar> </div> </div>`; class TopBar extends HTMLElement { constructor() { super(); const element = this.attachShadow({ mode: "open", }); element.appendChild(template.content.cloneNode(true)); } } customElements.define("top-bar", TopBar);Mi pregunta es cómo hago para que los dos archivos js se comuniquen entre sí para mostrar mi componente de barra de búsqueda en la barra superior.