class MiMensaje extends HTMLElement {
  // propiedad para escuchar solo los atributos definidos en el arreglo usando
  // attributeChangedCallback(attrName, oldValue, newValue)
  static get observedAttributes() {
    return ['msj'];
  }
  
  // propieda 'msj' sincronizada con el atributo 'msj'
  get msj() {
    return this.getAttribute('msj');
  }
  
  set msj(msj) {
    this.setAttribute('msj', msj);
  }
  
  // Pintar el mensaje que se declara en el atributo 'msj'
  pintarMensaje(msj) {
    this.innerHTML = msj
  }

  constructor() {
    super();
    this.addEventListener('click', function(e) {
      alert('Click en mensaje');
    });
    console.log('constructor: Cuando el elemento es creado');
  }
  
  // callback cuando se inserta el elemento en el dom
  connectedCallback() {
    console.log('connectedCallback: Cuando el elemento es insertado en el documento');
  }
  
  disconnectedCallback() {
    alert('disconnected: Cuando el elemento es eliminado del documento')
  }
  
  adoptedCallback() {
   alert('adoptedCallback: Cuando el elemento es adoptado por otro documento');
  }
  
  // Cuando un atributo es modificado, solo son llamados los atributos observados,
  // Estos son los definidos en la propiedad observedAttributes
  attributeChangedCallback(attrName, oldVal, newVal) {
    console.log('attributeChangedCallback: Cuando cambia un atributo');
    if (attrName === 'msj') {
      this.pintarMensaje(newVal);  
    }
  }
}

customElements.define('mi-mensaje', MiMensaje);

let miMensaje = document.createElement('mi-mensaje')
miMensaje.msj = 'Otro mensaje';
document.body.appendChild(miMensaje);

// Tambien puedes crear un elemento con el operador new
let tercerMensaje = new MiMensaje();
tercerMensaje.msj = 'Tercer mensaje';
document.body.appendChild(tercerMensaje);