How can I make HTML5 imports work properly on Firefox and IE11
<p>I'm using some features of the Web Platform such HTML Imports.  </p>

<p>On Chrome 52,  everything works fine,  as expected.  I know that there are issues with HTML Imports on IE11 and FF 47.</p>

<p>However I've been requested to deploy my web app on IE-11 for some users.  And here begins the pain.  As suggested by the few articles one can find on internet,  I called webcomponents polyfills in the head of my index.html,  which is the "importer" file: </p>

<pre><code>&lt;script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"&gt;&lt;/script&gt;
</code></pre>

<p>Also in the head itself:</p>

<pre><code>&lt;meta http-equiv="X-UA-Compatible" content="IE=Edge;FF=3;OtherUA=4" /&gt;
</code></pre>

<p>The code to instantiate the link selector,  with dynamic content based on the app state:</p>

<pre><code>var link = document.createElement('link');
link.rel = 'import';
link.href=ubicacion;
link.onload = function(e) {console.log('Loaded import: ' + e.target.href);};
link.onerror = function(e) {'Error loading import: ' + e.target.href};
document.head.appendChild(link);
</code></pre>

<p>And when loading on IE-11 I get threee error messages in console:</p>

<pre><code> Loaded Import: https://www.example.com/import.html
 SCRIPT5007: Can't get 'querySelector' property of null reference or undefined.
 Can't set property 'innerHTML' of reference null or undefined.
</code></pre>

<p>At the end of the index.html file,  I put the following code:</p>

<pre><code>var div = document.getElementById('vista');
var view = document.querySelector('link[rel="import"]');
var content = view.import;
var el = content.querySelector('.view');
div.appendChild(el.cloneNode(true));
</code></pre>

<p>The funny thing is that the polyfill works, because the onload message is printed instead of the onerror.  However there is an issue when getting the content of the "imported" file:  </p>

<pre><code>var el = content.querySelector('.view');
</code></pre>

<p>Which by the way has the following code at the beginning: </p>

<pre><code>&lt;div class="view" &gt;
&lt;script &gt;
 document._currentScript = document._currentScript ||   document.currentScript;
 var importDoc = document.currentScript.ownerDocument;
 var mainDoc = document;
</code></pre>

<p>As I stated before,  this works fine on Chrome.  The problem is on IE-11 and even on Firefox 47.  Even in FF I enabled the <strong>dom.webcomponents.enabled</strong> to true.</p>

<p>What can be improved in order to make HTML5 imports work fine on IE-11 and FF-47.</p>

<p>Please note that the users require IE-11,  Edge is not a possibility.
I appreciate your answers relating to vanillajs.  I'm not using jquery or any js wrapper.  Thanks.</p>