JSFiddle - React, Tailwind, and code Playground

JavaScript

polyfill();

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();

MySpecialButton = function() {
    MySpecialButton.super();
    this.textContent += "*Special";
};
MySpecialButton.prototype = {
    bluify: function() {
        this.style.color = 'blue';
    }
};
MySpecialButton = register('x-special-button', 'x-button', MySpecialButton);

var node = document.body.appendChild(new MySpecialButton());
console.dir(node);
node.orangate();
node.bluify();

/* end user code */

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

// actual 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 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() {};
};
    
function polyfill() {
    var dce = document.createElement;
    document.createElement = function(inTagName) {
        var record = registry[inTagName];
        return record ? new record.ctor() : dce.call(document, inTagName);
    };   
};