JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<!-- example from http://blog.falafel.com/extend-native-dom-elements-using-web-components/ -->
<body>
    <img is="img-ext" src="http://lorempixel.com/400/200/nature" caption="This is my custom caption!" />
    <br>
    <div id='ractive'></div>
    <script>
        (function() {
            var proto = Object.create(HTMLImageElement.prototype);
            proto.createdCallback = function() {
                var caption = this.getAttribute('caption');
                if (caption) this.insertAdjacentHTML('afterend', '<div>' + caption + '</div>');
            };
            document.registerElement('img-ext', {
                prototype: proto,
                extends: 'img'
            });

            var ractive = new Ractive({
                el: '#ractive',
                template: '<img is="img-ext" src="http://lorempixel.com/400/200/nature" caption="Ractivated caption!" />'
            });

        })();
    </script>
</body>