Lifecycle callbacks

my-todos.js

class MyTodos extends HTMLElement {
  // called when the HTML parser sees the HTML tag
  constructor () {
    // always call super() first in your constructor to inherit from your parent class
    super();
    this.title = 'My todos';
  }
  
  // called when the element is inserted in the DOM
  // immediately after constructor if the element is in the DOM already
  connectedCallback () {
    this.innerHTML = `<header>${ this.title }</header>`;
  }
  
  // called when the element is removed from the DOM. 
  disconnectedCallback() {
    
  }
  
  // called when an attribute was added, removed, or updated
  attributeChangedCallback(attributeName, oldValue, newValue) {
    
  }
  
  // called if the element has been moved into a new document
  adoptedCallback() {
    
  }
}

// register new tag and associate it with the class
customElements.define('my-todos', MyTodos);