Web Componenets

my-componenet.js

const template = document.createElement("template");
template.innerHTML = `
<style>
    :host{
        --light: #b0ade0;
        --main: #36308aff;
        --dark: #686778ff;
        --gr1:linear-gradient(90deg, var(--darker), var(--main));
        font-family: 'Changa', sans-serif;
        display:block;
        color:var(--main);
    } 
</style>

<h5 class = "title"> </h5>
`;

class MyComponent extends HTMLElement {
  //runs when element created
  constructor() {
    super();
    //add a font to root document
    document.head.innerHTML += `<link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Changa:wght@300;400;600;800&display=swap" rel="stylesheet">`;
    
    // Create shadow dom and append content via template
    this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(template.content.cloneNode(true));
  
    this.shadowRoot.querySelector(".title").innerHTML = "My Custom Element" ;
    this.myFunc = this.myFunc.bind(this);
  }
    
  // runs when element added to DOM
  connectedCallback() {

  }
  
  // runs when element removed from DOM
  disconnectedCallback() {
  
  }
    
  static get observedAttributes() {
    return ["imageUrl", "title"];
  }
  
  attributeChangedCallback(name, oldVal, newVal) {
  
  }
    
  myFunc = function(){
      this.shadowRoot.querySelector(".title").innerHTML = this.getAttribute("title");
  }
}

window.customElements.define("my-component", MyComponent);