我正在尝试以下示例谷歌开发者网站 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+ :-)
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
