javascript – 如何创建扩展自定义元素类的新实例

class FancyButton extends HTMLButtonElement {
  constructor() {
    super(); // always call super() first in the ctor.
    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'});
let button = new FancyButton();
button.textContent = 'Fancy button!';
button.disabled = true;