JSFiddle - React, Tailwind, and code Playground

by kentaromiura

HTML

<link rel="import" href="/echo/html/"></link>

JavaScript

if(typeof window.CustomEvent == 'undefined') {
    (function () {
      function CustomEvent ( event, params ) {
        params = params || { bubbles: false, cancelable: false, detail: undefined };
        var evt = document.createEvent( 'CustomEvent' );
        evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
        return evt;
       };
    
      CustomEvent.prototype = window.Event.prototype;
    
      window.CustomEvent = CustomEvent;
    })();
}

document.addEventListener('DOMContentLoaded', function(){
    var imports = document.querySelectorAll('link[rel=import]'),
        count = 0,
        max,
        inc = function(){
            count ++
            check()    
        },
        check = function(){
            if(count == max){     
                var event = new CustomEvent("HTMLImportsLoaded");
                document.dispatchEvent(event);       
            }
        }
    
    max = imports.length
    for (var i=0; i<max; i++){
        
        imports[i].addEventListener('load', inc)
        imports[i].addEventListener('error', inc)
        if(imports[i].import) inc()
        
    }
})


document.addEventListener('HTMLImportsLoaded', function(){
    alert('loaded')
})