custom element article tutorail

ex1.js

class AppDrawer extends HTMLElement {...}
window.customElements.define('app-drawer', AppDrawer);

ex2.js

class appCounter extends HTMLElement {
  
  constructor() {
    super();
    
    this.createButton();
    this.createCounter();
    
    document.querySelector('app-counter button').addEventListener('click', e => {
      const elm = document.querySelector('app-counter span');
      let number = elm.textContent;
      elm.textContent = parseInt(number) + 1;
    });
  }
  
  createButton() { 
    let btn = document.createElement("BUTTON");
    let txt = document.createTextNode("Counter");
    btn.appendChild(txt);
    this.appendChild(btn);
  }
  
  createCounter() { 
    let btn = document.createElement("SPAN");
    let txt = document.createTextNode("0");
    btn.appendChild(txt);
    this.appendChild(btn);
  }
}

window.customElements.define('app-counter', appCounter);

ex3.js

class AppDrawer extends HTMLElement {
 
  static get observedAttributes() {
    return ['open'];
  }
  
  get open() {
    return this.hasAttribute('open');
  }

  set open(val) {
    if (val) {
      this.setAttribute('open', '');
    } else {
      this.removeAttribute('open');
    }
  }

  constructor() {
    super();
     
    this.addEventListener('click', e => {
       this.open = false;
       this.textContent = this.hasAttribute('open');
    });
    
    this.textContent = this.hasAttribute('open');
  }
  
   attributeChangedCallback(attrName, oldVal, newVal) {
      if(this.open) { 
        this.innerHTML = this.hasAttribute('open');
      };
  }

}

window.customElements.define('app-drawer', AppDrawer);

setTimeout(() =>{ 
  document.querySelector('app-drawer').open = true;
}, 1000);

ex4.html

<custom-elm class="greeting"> 
  <div class="text-center">
    <p>Hello, World</p> 
  </div>
</custom-elm>

ex5.js

class CounterWithRounding extends CounterWithNoStyle {
  constructor() {
    super();
    ...
  }

  doSomething() {
  }
    
}

window.customElements.define('counter-with-rounding', CounterWithRounding);

ex6.js

class FancyButton extends HTMLButtonElement {
  constructor() {
    super();
    this.addEventListener('click', e => this.drawRipple(e.offsetX, e.offsetY));
  }

  // Material design ripple animation.
  drawRipple(x, y) {
    let div = document.createElement('div');
    div.classList.add('ripple');
    this.appendChild(div);
    div.style.top = `${y - div.clientHeight/2}px`;
    div.style.left = `${x - div.clientWidth/2}px`;
    div.style.backgroundColor = 'currentColor';
    div.classList.add('run');
    div.addEventListener('transitionend', e => div.remove());
  }
}

customElements.define('fancy-button', FancyButton, {extends: 'button'});