How can I make HTML5 imports work properly on Firefox and IE11

Question

I'm using some features of the Web Platform such HTML Imports.

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

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:

<script src="//cdnjs.cloudflare.com/ajax/libs/polymer/0.3.3/platform.js"></script>

Also in the head itself:

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

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

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);

And when loading on IE-11 I get threee error messages in console:

 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.

At the end of the index.html file, I put the following 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));

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:

var el = content.querySelector('.view');

Which by the way has the following code at the beginning:

<div class="view" >
<script >
 document._currentScript = document._currentScript ||   document.currentScript;
 var importDoc = document.currentScript.ownerDocument;
 var mainDoc = document;

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 dom.webcomponents.enabled to true.

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

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.

Answer 1

Your problem is that you are attempting to access a property before its defined.

var content = view.import;

The import property will be null until the webcomponents polyfill traverses the DOM and upgrades the link tag. You need to wrap that in a handler like so:

document.addEventListener('WebComponentsReady', function(e) {
  var div = document.getElementById('vista');
  var view = document.querySelector('link[rel="import"]');
  var content = view.import;
  var el = content.querySelector('.view'); // should be good now.
});

Docs regarding the .import property.