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

我正在尝试从 google developer site开始的示例,我得到错误：“TypeError：非法构造函数.
怎么了,怎么解决？

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;

解决方法

Blink,当前实现Custom Element v1的Web引擎(例如 Chrome v53+)仅支持 autonomous custom elements：请参阅打开 Blink bug.

如果要定义customized built-in elements(即< button>扩展名),则需要使用像the one from Web Reflection这样的polyfill.

或者,您仍然可以使用Custom Element v0语法(document.registerElement).

更新

自Chrome v60(2017年7月)以来,alpha implementation定制的buit-in元素可在旗帜下使用.但是它仅适用于< p>和< div>标签…

更新2

现在(2018年4月)它本身适用于Chrome v67及以上版本:-)

原文地址：https://www.jb51.cc/js/150409.html