問：添加 Javascript（通過鏈接到 HTML 文件）到帶有 DOM 的自定義元素

Question

我在添加 javascript 來處理自定義元素的事件時遇到問題。 我在名為 menu.js 的 javascript 文件中定義了一個自定義元素，方法是將此元素直接添加到 DOM，如下面的代碼：

customElements.define("custom-menu", class extends HTMLElement {
    connectedCallback() {
        this.innerHTML = `
        <header class="header">
            <div class="header__menu">
                <div class="header__menu_bar"></div>
                <div class="header__menu_bar"></div>
                <div class="header__menu_bar"></div>
            </div>
        </header>
        <div class="modal2">
            // some code HTML 
        </div>

    <div class="modal__details">
        // some code HTML
    </div>`;
    }
});


const header__menu = document.querySelector(".header__menu");
header__menu.addEventListener("click", function () {
    document.getElementsByClassName("modal2")[0].style.width = "100%";
    $("body").addClass("stop-scrolling");
    $("body").removeClass("enable-scrolling");
    if (document.body.offsetWidth <= "640") {
        document.getElementsByClassName("modal-content")[0].style.width = "100%";
    } else {
        document.getElementsByClassName("modal-content")[0].style.width = "290px";
    }
    document.getElementsByClassName("modal-content")[0].style.right = "0";
});

// some code Javascript handle class "modal2" and "modal__details"

每次將自定義元素插入 DOM 時，我都使用connectedCallback() function 調用。 如果我像上面的代碼一樣直接添加 Javascipt 代碼，我已經成功地使用 class "header__menu" 將點擊事件添加到 div 並處理這兩種模式。 現在我想把 Javascipt 代碼放在customElements.defined(...);之后到另一個 Javascipt 文件並使用此元素將此文件鏈接到文件 HTML 以執行相同的任務，但它不像我直接添加時那樣工作。 有人可以告訴我原因嗎？ 謝謝！

Answer 1

您必須確保在創建自定義元素后調用 js 代碼。

例如：

$(function () {
  const header__menu = document.querySelector(".header__menu");
  header__menu.addEventListener("click", function () {
    document.getElementsByClassName("modal2")[0].style.width = "100%";
    $("body").addClass("stop-scrolling");
    $("body").removeClass("enable-scrolling");
    if (document.body.offsetWidth <= "640") {
      document.getElementsByClassName("modal-content")[0].style.width = "100%";
    } else {
      document.getElementsByClassName("modal-content")[0].style.width = "290px";
    }
    document.getElementsByClassName("modal-content")[0].style.right = "0";
  });
});

Answer 2

當我為自定義元素設置樣式時，我將 css 代碼放入另一個文件，然后鏈接到 HTML 文件，就像我通常使用 HTML 標記、ZA2F212ED4F8EBCB1CED00381AA4Z 或這很好用，當我通過 F12 檢查時，我可以看到自定義元素的所有 html 代碼和其中的 styles。

例如，這是帶有 class 名稱modal__details的 div 的樣式：

.modal__details {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2;
  width: 0;
  height: 100%;
  transition: 0.4s;
  background-color: black;
}

我不需要指定任何東西。 它像任何其他 div 一樣工作。 這意味着我的自定義元素在 HTML DOM 中，但我可以通過像上面一樣直接放置 Javascript 來處理它，它在其他 JS 文件中不起作用。 我也試過你說的方法，但是失敗了。 所以這是我想知道的。