如何创建自定义元素的扩展类的新实例 [英] How to create new instance of an extended class of custom elements

问题描述

我正在尝试 google 开发者网站 并且我收到错误:类型错误:非法构造函数.出了什么问题以及如何解决?

I'm trying the example from google developer site and I'm getting Error: "TypeError: Illegal constructor. What's wrong and How to fix it?

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 引擎(在 例如 Chrome v53+)仅支持 自主自定义元素:参见打开闪烁错误.

Blink, the web engine that currently implements Custom Element v1 (in Chrome v53+ for example) only supports autonomous custom elements: see open Blink bug.

如果你想定义 定制的内置元素(即扩展)，你需要使用像Web 反射中的那个.

If you want to define customized built-in elements (i.e. <button> extension), you'll need to use a polyfill like the one from Web Reflection.

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

Alternatly, you can still use the Custom Element v0 syntax (document.registerElement).

更新 #3

自 2018 年 10 月以来，它们在本地支持 Chrome 67+ 和 Firefox 63+ :-)

Since october 2018, they work natively with Chrome 67+ and Firefox 63+ :-)

这篇关于如何创建自定义元素的扩展类的新实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！