Scripts cloned from HTML Imported template does not execute on polyfilled browsers

[tomalec]

I have an externalDoc.html:

<script>
  document.body.innerHTML += '<p>Script from HTML Import executed</p>';
</script>
<template>
  Template content from HTML Import stamped
  <script>
    document.body.innerHTML += '<p>Script from imported template executed</p>';
  </script>
</template>

Then, I:

1. Import it to the main using <link rel="import" href="externalDoc.html">
2. Outer script is executed - ✓
3. Clone and stamp templates content:

      let template = linkEl.import.querySelector('template');
      document.body.appendChild(
        document.importNode(template.content, true)
      );

4. Text content and script gets stamped/appended to the main document - ✓

jsbin: http://output.jsbin.com/yijokor/6/quiet

Expected behavior

Cloned script is executed

Actual behavior

It's not

Affected browsers

• Chrome ✓,
• Firefox,
• Edge,
• IE,
• [?] Safari,
• v0 Polyfill - ✓

Unfortunately, it's a blocking issue for us to migrate to V1 polyfill, as we are developing an application platform based on modular views made with HTML Imports based client-side includes. (https://starcounter.io/html-partialsincludes-webcomponents-way/)

So our customers have hundreds of nested imports with every kind of HTML markup in their templates.

//cc @valdrinkoshi

[valdrinkoshi]

Looks like we'll have to clone scripts inside templates in order to execute them :[

<pre id="out"></pre>
<script>
  const template = document.createElement('template');
  template.innerHTML = '<script>window.executedTemplateScript=true<\/script>';

  // we have to clone scripts inside templates :[
  // const script = template.content.querySelector('script');
  // const clone = document.createElement('script');
  // clone.textContent = script.textContent;
  // template.content.insertBefore(clone, script);
  // template.content.removeChild(script);

  document.body.appendChild(document.importNode(template.content, true));
  out.textContent = 'executed? ' + window.executedTemplateScript;
</script>