<like-button>

by WebComponents

HTML

<like-button></like-button>
<like-button liked ></like-button>
<like-button2></like-button2>
<like-button2 liked ></like-button2>
<script>
    customElements.define('like-button', class extends HTMLElement {
      static get observedAttributes() {  return ['liked']  }
      get liked() { return this.hasAttribute('liked')  }
      set liked(state) { this.toggleAttribute('liked', state) }
      constructor() {
        super().attachShadow({ mode:'open' });
      }
      attributeChangedCallback() {
        this.connectedCallback();
      }
      connectedCallback(){
        this.onclick = (evt) => this.liked = !this.liked;
        this.shadowRoot.innerHTML = this.liked 
                                        ? '<b>You liked this!</b>' 
                                        : `<button>Like</button>`;
      }
    });
  
    customElements.define('like-button2', class extends HTMLElement {
      static get observedAttributes() {  return ['liked']  }
      get liked() { return this.hasAttribute('liked')  }
      set liked(state) { this.toggleAttribute('liked', state) }
      attributeChangedCallback(){
      	this.connectedCallback();
      }
      connectedCallback(){
        this.onclick = (evt) => this.liked = !this.liked;
        this.innerHTML = this.liked ? '<b>You liked this!</b>' : `<button>Like</button>`;
      }
    });

</script>