JSFiddle - React, Tailwind, and code Playground

JavaScript

MyButton = function() {
    MyButton.super();
    this.textContent = "MyButton";
};
MyButton.prototype = {
    orangate: function() {
        this.style.backgroundColor = 'orange';
    }
};
MyButton = register('x-button', 'button', MyButton);

var node = document.body.appendChild(new MyButton());
node.orangate();

/* end user code */

// actualy implementation in our polyfill is better, this is enough for here
function makePrototypeTwiddlingConstructorForDomNodes(inExtends, inClass) {
    return function() {
        var instance = document.createElement(inExtends);
        var p = instance.__proto__;
        instance.__proto__ = inClass.prototype;
        inClass.prototype.__proto__ = p;
        inClass.call(instance);
        return instance;
    }
};

function register(inName, inExtends, inClass) {
    var ctor = makePrototypeTwiddlingConstructorForDomNodes(inExtends, inClass);
	addToTagRegistry(inName, ctor, inClass);
	ctor.super = getClassForExtendee(inClass);
	return ctor;
};

function addToTagRegistry(inName, inCtor, inClass) {
    if (!window.registry) {
        registry = {};
    }
    registry[inName] = {ctor: inCtor, klass: inClass};
};

function getClassForExtendee(inExtends) {
    var record = registry[inExtends];
    return record && record.klass || function() {};
};