custom_elements.js

class MyElement extends HTMLElement{

  constructor(){  
    super();
    console.log('element is instantiated.'); 
  }
  
  connectedCallback(){
    console.log('element is connected and added to the DOM tree.') 
  }
  
  disconnectedCallback(){
    console.log('element is disconnected and removed from DOM tree.')
  }

  static get observedAttributes(){
    return ['observed-attr']
  }
  
  attributeChangedCallback(name,oldValue,newValue){
    console.log(`attribute ${name}'s value has been changed from ${oldValue} to ${newValue}`);
  }

}