Era*_* Or 8 html javascript web-component ecmascript-6 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));
}
// 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;
Sup*_*arp 14
Blink,目前实现Custom Element v1的Web引擎(例如Chrome v53 +)仅支持自主自定义元素:请参阅打开Blink bug.
如果要定义自定义的内置元素(即<button>扩展名),则需要使用像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);
| 归档时间： |
|
| 查看次数： |
3384 次 |
| 最近记录： |