我正在尝试从
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:请参阅打开
Blink bug.
如果要定义customized built-in elements(即< button>扩展名),则需要使用像the one from Web Reflection这样的polyfill.
或者,您仍然可以使用Custom Element v0语法(document.registerElement).
更新
自Chrome v60(2017年7月)以来,alpha implementation定制的buit-in元素可在旗帜下使用.但是它仅适用于< p>和< div>标签…
更新2
现在(2018年4月)它本身适用于Chrome v67及以上版本:-)