JSFiddle - React, Tailwind, and code Playground
JavaScript
function CustomEl (width, height) {
var el = document.createElement('div')
el.__proto__ = CustomEl.prototype
el.style.position = 'absolute';
el.style.border = '1px solid';
el.style.width = width+'px';
el.style.height = height+'px';
return el
}
CustomEl.prototype = Object.create(HTMLDivElement.prototype);
CustomEl.prototype.move = function(x, y) {
this.style.left = (parseInt(this.style.left, 10) || 0) + x + 'px';
this.style.top = (parseInt(this.style.top, 10) || 0) + y + 'px';
};
CustomEl.prototype.appendTo = function (el) {
el.appendChild(this);
};
CustomEl.prototype.text = function (text) {
if (typeof text === 'undefined') {
return this.innerText;
} else {
this.innerHTML = typeof text === 'function' ? text() : text;
}
};
CustomEl.prototype.animate = function () {
this.move(5, 5);
if (++i <= 5) setTimeout(this.animate.bind(this), 500);
};
var a = new CustomEl(150, 100);
a.appendTo(document.body);
var i = 0;
a.animate();
a.text('Node instance: '+(a instanceof Node));
a.text(a.text()+'<br>CustomEl instance: '+(a instanceof CustomEl));