javascript - Cómo crear una nueva instancia de una clase extendida de elementos personalizados
html ecmascript-6 (2)
Estoy probando el ejemplo del sitio de desarrolladores de Google y obtengo el error: "TypeError: constructor ilegal. ¿Qué hay de malo y cómo solucionarlo?
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, el motor web que actualmente implementa Custom Element v1 (en Chrome v53 +, por ejemplo) solo admite elementos personalizados autónomos : vea el error de Blink abierto.
Si desea definir
elementos integrados personalizados
(es decir, la extensión
<button>
), deberá usar un polyfill como
el de Web Reflection
.
Alternativamente, aún puede usar la sintaxis Custom Element v0 (
document.registerElement
).
Actualización n. ° 3
Desde octubre de 2018, funcionan de forma nativa con Chrome 67+ y 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''});
usar en línea:
<body> .... <f-btn>BTN_NAME</f-btn> ... </body>
o crear agregar desde javascript
var elm = new F_BTN(...options);
// F_BTN = customElements.get(''f-btn'') // in case F_BTN is out of scope
El problema
es que
elm = document.createElement(''f-btn'')
no funciona.
Es por eso que hice mi función personalizada 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);