javascript - Vanilla Javascript 组件在另一个组件中不起作用

Question

我在 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);

之后我创建了另一个组件，我尝试在其中插入自定义搜索栏：

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);

我的问题是如何使两个 js 文件相互通信，以便将我的搜索栏组件显示到顶部栏中。

标签： javascriptcomponents