Dear Web Component

Danny Engelman - Jan 26 - - Dev Community

How would you address your new found love?

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

or

  customElements.define('click-button', class extends HTMLElement {
    constructor() {
      const createElement = (tag, props = {}) => Object.assign(document.createElement(tag), props);
      super() // sets AND returns 'this'
        .attachShadow({mode:'open'}) // sets AND returns this.shadowRoot
        .append(
           this.button = createElement( 'button', {
             innerHTML: 'Click me',
             onclick  : (evt) => alert('Button clicked!', this.nodeName)
           })
        );
    }
  });
Enter fullscreen mode Exit fullscreen mode



. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player