问：使用 DOM 将 Javascript（通过链接到 HTML 文件）添加到自定义元素

Posted 2023-05-09

【中文标题】问：使用 DOM 将 Javascript（通过链接到 HTML 文件）添加到自定义元素

【英文标题】：Q: Add Javascript(By Link To HTML File) To Custom Element With DOM

【发布时间】：2021-03-26 07:40:18

【问题描述】：

我在添加 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() 函数调用。如果我像上面的代码一样直接添加 Javascipt 代码，我已经成功地将 click 事件添加到具有类“header__menu”的 div 并处理了两种模式。现在我想将customElements.defined(...); 之后的 Javascipt 代码放到另一个 Javascipt 文件中，并使用此元素将此文件链接到文件 HTML 以执行相同的任务，但它不像我直接添加时那样工作。有人可以告诉我原因吗？ 谢谢！

【参考方案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";
  );
);

【参考方案2】：

当我为自定义元素设置样式时，我将 css 代码放到另一个文件中，然后链接到 HTML 文件，就像我通常使用 HTML 标记、类或 ID 一样。这很好用，当我通过 F12 检查时，我可以看到自定义元素的所有 html 代码及其样式。

例如，这是类名为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 文件中不起作用。我也试过你说的方法，但是失败了。所以我对此感到疑惑。