Q: Add Javascript(By Link To HTML File) To Custom Element With DOM

Question

I have a problem with adding javascript to handle event for a custom element. I defined a custom element in a javascript file called menu.js, by adding this element to DOM directly, like the code below:

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"

I use connectedCallback() function to call everytime custom element is inserted into the DOM. If I add Javascipt code directly like the code above, I have succeeded to add click event to the div with class "header__menu" and handle both the modals. Now I want to put the Javascipt code after customElements.defined(...);to another Javascipt file and link this file to file HTML using this element to do the same task but it doesn't work as when I add directly. Can someone tell me the reason? Thank you!

Answer 1

You have to make sure the js code get called after the custom element is created.

For example:

$(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

When I style the custom element, I put css code to another file then link to HTML file like I usually work with HTML tag, class or id.This work well, and when I inspect by F12, I can see all html codes of custom element and styles of them.

For example, this is style of the div with class name modal__details :

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

I don't need to specify anything. It works like any other div. It means my custom element is in HTML DOM, but I just can handle it by put Javascript directly like above, it doesn't work in other JS file. I have also tried the way you instruct, but it has failed. So it's my wondering about that.