class MiMensaje extends HTMLElement {
  // propiedad para escuchar solo los atributos
  // definidos en el arreglo usando
  // attributeChangedCallback
  static get observedAttributes () {
    return ['msj', 'casi-visible'];
  }
  
  //propieda 'msj' sincronizada con el atributo 'msj'
  get msj () {
    return this.getAttribute('msj');
  }
  
  set msj (msj) {
    this.setAttribute('msj', msj);
  }
  //propieda 'casiVisible' sincronizada con el atributo 'casi-visible'
  get casiVisible () {
    return this.hasAttribute('casi-visible');
  }
  
  set casiVisible (value) {
    if(value) {
      this.setAttribute('casi-visible', '');  
    } else {
      this.removeAttribute('casi-visible') 
    }
  }
  
  // Pintar el mensaje que se declara en el atributo 'msj'
  pintarMensaje (msj) {
    this.innerHTML = msj
  }
  // define la opacidad del elemento basado en la 
  // propiedad casiVisible
  setCasiVisible () {
    if(this.casiVisible) {
      this.style.opacity = 0.1;
    } else {
      this.style.opacity = 1;
    }
  }
  
  constructor () {
    super();
    this.addEventListener('click', function(e) {
      alert(this.msj);
    });
  }

  attributeChangedCallback (attrName, oldVal, newVal) {
    if(attrName === 'msj') {
      this.pintarMensaje(newVal);  
    }
    
    if(attrName === 'casi-visible') {
      this.setCasiVisible();
    }
  }
}

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