Dear Web Component

How would you address your new found love?

  class ClickButton extends HTMLElement {
    constructor() {
      super(); // Always call super() first 
      this.attachShadow({mode:'open'});
      const button = document.createElement('button');
      button.innerHTML = 'Click me';
      this.shadowRoot.appendChild(button);
      button.addEventListener('click', () => {
        alert('Button clicked!');
      });
    }
  }
  customElements.define('click-button', ClickButton);

  customElements.define('click-button', class extends HTMLElement {
    constructor() {
      const createElement = (tag, props = {}) => Object.assign(document.createElement(tag), props);
      super().attachShadow({mode:'open'})
             .append(
                 createElement( 'button', {
                     innerHTML: 'Click me',
                     onclick  : () => alert('Button clicked!')
                 })
             );
    }
  });

JSFiddle playground: …

alert call class click document dom found frontend javascript love tag web webcomponents