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

Question

我正在尝试来自 google developer site 的示例我收到错误:“类型错误:非法构造函数。
出了什么问题以及如何解决？

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;

Answer 1

Blink，当前实现自定义元素 v1 的 Web 引擎(例如在 Chrome v53+ 中)仅支持 autonomous custom elements : 见打开 Blink bug .

如果要定义 customized built-in elements (即 <button> 扩展名)，您需要使用类似 the one from Web Reflection 的 polyfill .

或者，您仍然可以使用自定义元素 v0 语法 ( document.registerElement )。

更新 #3

自 2018 年 10 月以来，它们在 native 上与 Chrome 67+ 和 Firefox 63+ 一起使用 :-)