lalalalal-web-component

main.js

// forked from https://github.com/mdn/web-components-examples/blob/main/composed-composed-path/index.html
customElements.define(
  "open-shadow",
  class extends HTMLElement {
    constructor() {
      super();

      const pElem = document.createElement("p");
      pElem.textContent =
        this.getAttribute("resourcename") + ", hello there shashwat";
      console.log("hi", this.attributes, this);
      const shadowRoot = this.attachShadow({ mode: "open" });
      shadowRoot.appendChild(pElem);
      document.querySelector("html").addEventListener("click", (e) => {
        console.log(this.attributes);
        console.log(this.attributes.length);
        console.log(this.attributes.resourcename);
      });

      const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
          if (mutation.type === "attributes") {
            console.log(
              "The " + mutation.attributeName + " attribute was modified."
            );
            if (mutation.attributeName === "user") {
              pElem.textContent = this.getAttribute("user");

              observer.disconnect();
            }
          }
        });
      });

      const shashwat = document.createElement("h1");
      shashwat.textContent = "Hi shashwat";
      shadowRoot.appendChild(shashwat);

      shashwat.style.backgroundImage = `url(https://cdn3.emoji.gg/emojis/4476_thinkpartyblob.gif)`;
      shashwat.style.backgroundRepeat = "repeat-x";
      shashwat.style.backgroundSize = "64px";
      shashwat.style.height = "10vh";
      observer.observe(this, { attributes: true });
      const h1 = document.createElement("h1");
      h1.textContent = "Hi unni";
      shadowRoot.appendChild(h1);

      const img = document.createElement("img");
      img.src = `https://i.imgur.com/BWx9T3Y.png`;
      img.width = 512;
      shadowRoot.appendChild(img);
      // i want the shadowroot to have the above image also as a background
      h1.style.backgroundImage = `url(https://i.imgur.com/BWx9T3Y.png)`;
      h1.style.height = "50vh";
      h1.style.backgroundSize = "contain";
    }
  }
);