WIP..

gistfile1.js

define([], function () {

    function injectStyle(css) {
        var st = document.createElement('style');
        /* If you got here it is before anything is drawn -
                Add a rule to hide it until it is widgetized...
            */
        var head = document.getElementsByTagName('head')[0];
        try {
            st.innerHTML = css;
            head.appendChild(st);
        } catch (e) {
            head.appendChild(st);
            document.styleSheets[document.styleSheets.length - 1].cssText = css;
        }
    }
    // stupid IE8 won't qsa dashed named and it is case-sensitve on them...
    var converters_name_map = { /* tagName: originalCase */ };
    var converters = { /* originalCaseTagName: config */ };
    var createNewElementForUpgrade = function (original) {
        var origName = converters_name_map[original.tagName];
        var span = document.createElement(origName);
        span.className = original.className;
        for (var i = 0; i < original.attributes.length; i++) {
            span.setAttribute(original.attributes[i].name, original.attributes[i].value);
        }
        span.classList.add(origName);
        original.parentNode.replaceChild(span, original);
        return span;
    };
    var ncfTags = {
        injectStyle: injectStyle,
        /* 
            How we are importing support.. fast.
            data-widgets is boolean, you can use comma seperated for readability/documentation
            and we can pre-search and set their visibility to hidden until they are 
            upgraded to avoid FOUC issues.

            <link
                rel="prefetch"
                href="    e/registration/public/javascript/component.js"
                data-widgets="x-foo,x-bar"
            > 
        */
        scanForImports: function () {
            var dependencies = [],
                link, tagHints = [],
                hint;
            // let's just keep it simple for IE8 sake
            var links = document.querySelectorAll("link[data-widgets]");


            for (var i = 0; i < links.length; i++) {
                link = links[i];
                dependencies.push(link.getAttribute("href"));
                hint = link.getAttribute("data-widgets");
                if (hint) {
                    tagHints.push(hint);
                }
            };
            if (tagHints.length > 0) {
                injectStyle(tagHints.join(",") + "{ visibility: visible; }");
            }
            if (dependencies.length > 0) {
                require(dependencies, function () {
                    // all loaded / registered
                    ncfTags.scanForTags();
                });
            }
        },
        scanForTags: function () {
            var tagNames = Object.keys(converters);
            tagNames.forEach(function (tagName) {
                var elements = Array.prototype.slice.call(document.getElementsByTagName(tagName));
                elements.forEach(function (el) {
                    var properCaseForIE = converters_name_map[el.tagName];
                    var created = createNewElementForUpgrade(el);
                    // new plan, create a new
                    converters[properCaseForIE].lifecycle.created.call(created);
                });
            });

        },
        register: function (tagName, config) {
            converters[tagName] = config;
            converters_name_map[tagName.toUpperCase()] = tagName;
        }
    };

    // Badass... we support imports in head, put your include of script anywhere, 
    // we'll start processing already prefetched stuff as soon as we hit body...
    var liveBody = document.getElementsByTagName('body');
    var checkForBody = function () {
        if (liveBody.length > 0) {
            ncfTags.scanForImports(); // GO GO GO!!
        } else {
            setTimeout(checkForBody);
        }
    };
    checkForBody();
    window.xtag = ncfTags; // alias...
    return ncfTags;
});