IE11: Converting HTML to innerHTML that's written to main doc does not work with <template> polyfill

[sorvell]

Due to a limitation in the Template polyfill, nested templates are not upgraded when innerHTML is set on a non-template element.

This means that when modulizer converts HTML to a string that's set as innerHTML on an element and then attached to the main document, any will not be upgraded and therefore not work on browsers (like IE11) that do not have .

To fix this, we can change the pattern used to this:

const documentContainer = document.createElement('template');
documentContainer.innerHTML = `<div style="display: none;">HTML CONTENT</div`;
document.body.appendChild(documentContainer.content);

[web-padawan]

BTW we have most likely faced this issue as well when testing in IE11, with the following exception:

Windows 10 IE 11         Tests failed: Error thrown outside of test function: Unable to get property 'querySelectorAll' of undefined or null reference
     stylesFromTemplate at /components/@polymer/polymer/lib/utils/style-gather.js:99
       stylesFromModule at /components/@polymer/polymer/lib/utils/style-gather.js:84
      stylesFromModules at /components/@polymer/polymer/lib/utils/style-gather.js:62
     stylesFromTemplate at /components/@polymer/polymer/lib/utils/style-gather.js:108
       stylesFromModule at /components/@polymer/polymer/lib/utils/style-gather.js:84
      stylesFromModules at /components/@polymer/polymer/lib/utils/style-gather.js:62
     stylesFromTemplate at /components/@polymer/polymer/lib/utils/style-gather.js:108
   processElementStyles at /components/@polymer/polymer/lib/mixins/element-mixin.js:200
      _finalizeTemplate at /components/@polymer/polymer/lib/mixins/element-mixin.js:687
  _initializeProperties at /components/@polymer/polymer/lib/mixins/element-mixin.js:454

This fails on the template.content check so that it is clear that template is not upgraded.

In some cases the error is different and looks like this:

Error thrown outside of test function: the string "console.error: Error stamping [object HTMLUnknownElement] TypeError: Unable to get property 'querySelectorAll' of undefined or null reference" was thrown, throw an Error :)

I suspected both of those were related to the polyfill. Have also tried some workarounds, like explicit custom-style imports, which appeared to fix the crash in some cases, see e. g. vaadin/vaadin-progress-bar@1717e19. It does not look as a proper fix though.