Javascript 如何创建自定义元素扩展类的新实例
我试着从中得到一个错误：“TypeError:非法构造函数。 出了什么问题以及如何解决Javascript 如何创建自定义元素扩展类的新实例,javascript,html,ecmascript-6,web-component,custom-element,Javascript,Html,Ecmascript 6,Web Component,Custom Element,我试着从中得到一个错误：“TypeError:非法构造函数。 出了什么问题以及如何解决 class FancyButton extends HTMLButtonElement { constructor() { super(); // always call super() first in the ctor. this.addEventListener('click', e => this.drawRipple(e.offsetX,e.offsetY)); }
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引擎仅支持：请参阅open 如果要定义（即
document.registerement更新#3 自2018年10月起，他们在本地与Chrome 67+和Firefox 63+合作：-） 使用内联：
<body> .... <f-btn>BTN_NAME</f-btn> ... </body>
elm=document.createElement（'f-btn'）_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);
\u E=函数（名称、html）{
var$；
开关（真）{
case（name==''||！name）：//_E（）--一个div
{
$=document.createElement（'div'）；
}
打破
case（！name.indexOf（'您使用的浏览器（版本）是什么？当前的浏览器都不支持。来自开发者网站：Chrome 54（状态）具有自定义元素v1。Safari已开始原型化，您可以每晚在WebKit中测试API。Edge已开始原型化。Mozilla有一个开放的bug要实现。Safari不会在第一次实现自定义内置元素。因此，请检查更新的兼容性表在customElement中添加扩展选项s、 define
方法对我有效。谢谢。
var elm = new F_BTN(...options);
// F_BTN = customElements.get('f-btn') // in case F_BTN is out of scope
_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);