I made a search bar component in 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);and after that I created another component where I tried to insert my custom search bar:
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);My question is how do I make the two js files to communicate with each other in order to display my search-bar component into the top-bar.