JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<k-radio>
    <option value="foo">bar</option>
    <option value="zzz" checked>baz</option>
</k-radio>

JavaScript

(function () {
    var id = 0,
        unique = function () {
            return '_' + (id++).toString(36)
        },
        KRadioProto = Object.create(HTMLElement.prototype)
        // create an observer instance
        var observer = new MutationObserver(function(mutations) {
          mutations.forEach(function(mutation) {
              observer.disconnect()
              create.call(mutation.target)
          });    
        });
         
        var config = { attributes: true, childList: true, characterData: true };
    
        function create(){
            var options = this.getElementsByTagName('option') || [],
                template = '<label><input type="radio" value="{value}" name="{uid}" {checked}>{text}</input></label>',
                content = [],
                placeholders = /\{(.*?)\}/g,
                uid = unique()

                for (var i = 0, max = options.length; i < max; i++) {
                    var opt = options[i],
                        text = opt.innerHTML,
                        value = opt.getAttribute('value') || text,
                        checked = opt.getAttribute('checked') != null,
                        data = {
                            value: value,
                            text: text,
                            uid: uid,
                            checked: checked ? 'checked' : ''
                        }

                    content.push(template.replace(placeholders, function (a, b) {
                        return data[b]
                    }))
                }

            this.innerHTML = content.join('')
            observer.observe(this, config);
        }
        
        KRadioProto.createdCallback = function () {
            create.call(this)            
        }
        
    Object.defineProperty(KRadioProto, 'value', {
        get: function () {
            var result = null,
                inputs = this.getElementsByTagName('input') || []

            for (var i = 0, max =...