Custom Elements

custom-elements.js

(function() {
    var elements = {};
    
    function scan() {
        [].forEach.call(
            document.querySelectorAll('template[element]'),
            function(el) {
                var name = el.getAttribute('element'),
                    script = el.content.querySelector('script'),
                    js = script.innerHTML;
                if (elements.hasOwnProperty(name)) return;
                script.remove();
                createCustomElement(name, js, [].map.call(
                    el.content.childNodes,
                    function(n) { return n.outerHTML; }
                ).join(''));
                el.remove();
            }
        );
    }
    
    function createCustomElement(name, js, html) {
        function F(){}
        F.prototype = Object.create(HTMLElement.prototype);
        var me = F.prototype;
        extend(me, eval('('+js+')'));
        var cb = me.createdCallback;
        me.createdCallback = function() {
            this.createShadowRoot();
            this.shadowRoot.innerHTML = html;
            if (typeof cb==='function') cb.call(this);
        };
        document.registerElement(name, F);
        elements[name] = F;
    }
    
    function extend(base) {
        for (var i=1, j; i<arguments.length; i++)
            for (j in arguments[i])
                if (arguments[i].hasOwnProperty(j))
                    base[j] = arguments[i][j];
        return base;
    }
    
    scan();
    window.addEventListener('load', scan);
    setInterval(scan, 500);
    window.attachCustomElements = scan;
}());

Sorry