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

我正在尝试以下示例谷歌开发者网站 https://developers.google.com/web/fundamentals/getting-started/primers/customelements#extendhtml我收到错误：“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，当前实现自定义元素 v1 的 Web 引擎（在铬 v53+ https://stackoverflow.com/a/38725765/4600982例如）仅支持自主定制元素 https://html.spec.whatwg.org/multipage/scripting.html#custom-elements-autonomous-example: 看开闪烁错误 https://bugs.chromium.org/p/chromium/issues/detail?id=648828.

如果你想定义定制的内置元素 https://html.spec.whatwg.org/multipage/scripting.html#custom-elements-customized-builtin-example (i.e. <button>扩展），你需要使用像这样的polyfill来自 Web Reflection 的一个 https://github.com/WebReflection/document-register-element.

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

更新#3

自 2018 年 10 月起，它们原生支持 Chrome 67+ 和 Firefox 63+ :-)