IE still needs full webcomponents.js (non lite) in this edge case

[nippur72]

A custom element created by code (manually creating <dom-module> and injecting template) results in an empty element in IE 11.

But if I switch from webcomponents-lite.js to webcomponents.js it starts to work normally like in Chrome or Firefox.

Any idea why this happens? Is it a webcomponents bug?

I wouldn't like include the full WebComponents just for this reason.

The dom-module creation code is:

function createDomModule(proto,templateString)
{
      var domModule = document.createElement('dom-module');
      domModule.id = proto.is;
      var elemTemplate = document.createElement('template');
      domModule.appendChild(elemTemplate);
      elemTemplate.innerHTML = templateString;
      domModule.createdCallback();
}

As said before, the above code works normally in Chrome and FF, but not IE.

[kevinpschaaf]

The standalone Template polyfill used in wcjs-lite does not currently support innerHTML. It should be fairly straightforward to add, and I've opened an issue on that tracker: webcomponents/webcomponentsjs#355

In the meantime, I've added code to your createDomModule method that effectively does what the Template polyfill would need to do: performs innerHTML in a separate document (to ensure the elements don't upgrade), and then moves them into the template's content: http://jsbin.com/luvuda/edit?html,output. Hopefully that unsticks you for now.

We also noticed you needed to call createdCallback on dom-module after creating it imperatively to get it to register. We'll add a register API to allow registration for the imperative case as well, since calling createdCallback is a bit hacky.

[nippur72]

Ok, big thanks for the workaround code, it works nicely.

[kevinpschaaf]

Closing, as webcomponents/webcomponentsjs#355 has been resolved (added <template>.innerHTML support to polyfill).

[nippur72]

thanks, it works perfectly!

[nippur72]

@kevinpschaaf just to let you know that the createDomModule() you suggested to use does not work in IE11 if the element has a <template is="dom repeat"> (it raises a weird exception in Polymer).

Don't know if it's a Polymer bug or webcomponents bug.

I tried both versions, the "good" for latest webcomponentsjs and the "meantime" for the old 0.7.2, but none of them work in IE11.

BUT: I switched to a simpler createDomModule() like this:

   function createDomModule(proto) {
      var domModule = document.createElement('dom-module');      
      domModule.id = proto.is;
      var html = "";
      if (proto.style !== undefined)    html += `<style>${proto.style}</style>`;
      if (proto.template !== undefined) html += `<template>${proto.template}</template>`;      
      domModule.innerHTML = html;
      (domModule as any).createdCallback();
   }   

and it works perfectly in all browsers and all webcomponents versions (0.7.2 and 0.7.10), so I'm using it for my project (PolymerTS).

Just wanted to let you know, thank you for your kind help.

[kevinpschaaf]

Thanks for the follow-up! This pointed out a problem with the innerHTML implementation landed in webcomponents/webcomponentsjs#355, which didn't handle nested templates injected through innerHTML. I posted an issue (webcomponents/webcomponentsjs#374) and fix (webcomponents/webcomponentsjs#376).