Menu
I'm trying the example from google developer site and I'm getting Error: "TypeError: Illegal constructor. What's wrong and How to fix it?
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;
740
Steps involved in creating a Custom HTML Element:Create a new Class representing the New Element (ES6) Extend the class from “HTMLElement” Add “connectedCallback” function to the class to access DOM Element when the element is added to the document. Access the Custom DOM Element using “this” keyword.
We can create custom HTML elements, described by our class, with its own methods and properties, events and so on. Once a custom element is defined, we can use it on par with built-in HTML elements.
Customized built-in elements inherit from basic HTML elements. To create one of these, you have to specify which element they extend (as implied in the examples above), and they are used by writing out the basic element but specifying the name of the custom element in the is attribute (or property).
class F_BTN extends HTMLButtonElement{
constructor(){
super(); // must call constructor from parent class
this.addEventListener(...);
.... // etc.
}
}
customElements.define("f-btn",F_BTN,{extends:'button'});
use inline:
<body> .... <f-btn>BTN_NAME</f-btn> ... </body>
or create append from javascript
var elm = new F_BTN(...options);
// F_BTN = customElements.get('f-btn') // in case F_BTN is out of scope
The problem is elm = document.createElement('f-btn') doesn't work.
That is why I made my custom create_element function _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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
