JSFiddle - React, Tailwind, and code Playground

by quickui

HTML

<!-- Button subclassing test -->

<!-- Note: At this point, the plain DOM elements can be divs or spans,
but can't be buttons. -->
<span is="IconButton">Icon Button</span>
<span is="AsteriskButton">Asterisk Button</span>
<span is="IconButton">Icon Button</span>

CSS

body {
    font-family: Helvetica, Arial, sans serif;
    padding: 1em;
}

/* Fake button styling until we can use real buttons */
.IconButton {
    border: 1px solid gray;
    padding: .25em .5em;
}

.AsteriskButton {
    color: darkred;
}

JavaScript

// Shows a little document icon to the left of the content.
window.IconButton = function( host ) {
    if ( host ) {
        this.root = new WebKitShadowRoot( host );
        host.className = "IconButton " + host.className;
        this.root.innerHTML = "<img src='http://quickui.org/demos/resources/document_alt_stroke_12x16.png'/> <content></content>";
    }
}

// Adds asterisks to its content.
window.AsteriskButton= function( host ) {
    if ( host ) {
        IconButton.call( this, host );
        host.className = "AsteriskButton " + host.className;
        this.root = new WebKitShadowRoot( host );
        this.root.innerHTML = "<span>*<shadow></shadow>*</span>";
    }
}
AsteriskButton.prototype = new IconButton();
AsteriskButton.prototype.constructor = AsteriskButton;

// Instantiate the components.
$.fn.createComponents = function() {
    $( "[is]" ).each( function( index, element ) {
        var $element = $( element );
        var componentClassName = $element.attr( "is" );
        var classFn = window[ componentClassName ];
        if ( classFn ) {
            new classFn( element );
        }
    });
    return this;
}

$( function() {
    $( document.body).createComponents();
});