Comment by mg

What do you not like about WebComponents?

Say we want to make an icon that when clicked shows how often it was clicked. The webcomponent code seens quite sane to me:

   class HelloIcon extends HTMLElement {
      connectedCallback() {
        this.clickCount = 0;

        this.innerHTML = `
          <button class="icon">:)</button>
          <dialog>
            <p>Hello, I was clicked 0 times</p>
            <button class="close">Close</button>
          </dialog>
        `;

        const icon = this.querySelector('.icon');
        const dialog = this.querySelector('dialog');
        const closeBtn = this.querySelector('.close');
        const dialogText = this.querySelector('p');

        icon.addEventListener('click', () => {
          this.clickCount++;
          dialogText.textContent = `Hello, I was clicked ${this.clickCount} times`;
          dialog.showModal();
        });

        closeBtn.addEventListener('click', () => dialog.close());
      }
    }

Try it here:

https://plnkr.co/edit/0XUOLyM52xfFiIBu?open=index.html&previ...