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.

Towner

Try some detection: html5rocks.com/en/tutorials/webcomponents/imports - current support: caniuse.com/#feat=imports – Scut

If you manage to crack this let me know. I spent a lot of time unsuccessfully working on it a few months ago. Only 'solution' was to load the webcomponents polyfill unconditionally (put a script tag for it in the head of my index.html). – Peshawar

@JaredSmith I'm going nuts: Have already called unconditionally the polyfills. Loading is succesful, however the fail is on appending values. The same in FF. – Towner

Sounds like maybe the DOM access is being attempted before the DOM is ready. Have you tried wrapping in a DOMContentLoaded handler? As for me, I build stuff with Polymer for work and I typically put my markup in an auto-binding template, then listen for the dom-change event on that. I thought you meant you were conditionally loading the polyfill. – Peshawar

This is the line in conflict: I simply console log before and after, and for sure it's crashing: var el = content.querySelector('.view'); – Towner

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.

Peshawar

Ok @JaredSmith, I understand, so I must attach a response or a Promise to the moment the 'WebComponentsReady' event triggers, then the process initiates? or is there a way to trigger onload page? – Towner

Great collaboration @JaredSmith. Yeesss! – Towner

@datelligence no problem. Now if I could just get dynamically created imports to load in a deterministic order... – Peshawar