我正在尝试从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：请参阅open Blink bug。
如果你想定义customized built-in elements（即<button>扩展名），你需要使用像the one from Web Reflection这样的polyfill。
另外，您仍然可以使用Custom Element v0语法（document.registerElement）。
更新＃3
自2018年10月以来，他们使用Chrome 67+和Firefox 63+本地工作:-)
class F_BTN extends HTMLButtonElement{
constructor(){
super(); // must call constructor from parent class
this.addEventListener(...);
.... // etc.
}
}
customElements.define("f-btn",F_BTN,{extends:'button'});
使用内联：
<body> .... <f-btn>BTN_NAME</f-btn> ... </body>
或者从javascript创建追加
var elm = new F_BTN(...options);
// F_BTN = customElements.get('f-btn') // in case F_BTN is out of scope
问题是elm = document.createElement('f-btn')不起作用。
这就是我创建自定义create_element函数_E的原因
_E = function (name, html) {
var $;
switch (true) {
case (name === '' || !name): // _E() -- a div
{
$ = document.createElement('div');
}
break;
case (!name.indexOf('<')): // _E('<h1><i>abc</i><b>A</b></h1>') -- sub_dom
{
$ = document.createElement('div');
$.innerHTML = name;
$ = $.firstElementChild;
}
break;
default:
var c = window.customElements.get(name);
if(c){
$ = new c(); // _E('f-btn') -- customElement
} else {
$ = document.createElement(name); // _E('button') -- htmlElement
}
}
if (html) $.innerHTML = html;
return $;
};
var elm1 = _E('f-btn'); parent.appendChild(elm1);