Script imported from template tag does not evaluate

[molst]

A script imported from a template tag, cloned and appended into the main document does not get evaluated in Firefox and IE11. It works in Safari and Chrome.

Switching the template to a div seems to work better, but gives a type error "wrapper is undefined" in webcomponents.js.

This repo demonstrates the problem.

(use version 0.5.2 of webcomponents.js)

[addyosmani]

In FF I'm currently seeing this using your repro:

Are you still seeing broken behaviour on imported/cloned template content with 0.5.4?

[molst]

Unfortunately, that does not confirm the test case OK. Sorry for the not very obvious message. I've updated the repo with clearer messages and use of webcomponents 0.5.4 and am still seeing the problem. It should say "Component SCRIPT loaded. Test case OK!" when it works.

[garlicnation]

From @ebidel in Polymer/polymer#1197:
Test: http://jsbin.com/qegitukowe/1/edit?html,output

The import used in the demo contains a <template> with a <script> in it.

Expected: In Chrome, when you click that page it updates the <template ref>
with "content2" and alerts 10.
Actual: In FF (polyfill), the template content is updated but the alert never happens (e.g. the script doesn't execute).

This may have something to do with template being in another document and the polyfill using .innerHTML.

[garlicnation]

@atotic

[atotic]

Looking into it. Looks like importNode is flubbered on FF.

[garlicnation]

Some of @atotic's notes:

Looked into FF source again. If you look at nsNodeUtils::CloneAndAdopt, there is a hasHadScriptHandlingObject variable. That var explains cloned nodes not getting executed. You get to CloneAndAdopt from importNode...

http://lxr.mozilla.org/mozilla-central/source/dom/base/nsNodeUtils.cpp#344

https://github.com/atotic/web-component-polyfill-test

all browsers refuse to execute a clonedNode
but Chrome executes importedNode
FF does not

[garlicnation]

Some history of the issue in firefox:
https://bugzilla.mozilla.org/show_bug.cgi?id=460460
https://bugzilla.mozilla.org/show_bug.cgi?id=456271

[garlicnation]

The fix is to manually recreate a template node before attaching it to the document. There are a couple potentially appropriate locations for this:

In the Polymer source in template stamping code, after calling importNode and before calling attach.
In the CustomElements polyfill, by wrapping document.importNode.

[atotic]

We do not have to recreate the entire template, just the script elements. After import, I loop though all script nodes, create clone with create element, insert the clone, and remove originals. Sample code is in my test case branch.

Aleks
-- sent from my phone

On Mar 4, 2015, at 3:40 PM, AJ Ortega notifications@github.com wrote:

The fix is to manually recreate a template node before attaching it to the document. There are a couple potentially appropriate locations for this:

In the Polymer source in template stamping code, after calling importNode and before calling attach.
In the CustomElements polyfill, by wrapping document.importNode.

—
Reply to this email directly or view it on GitHub.

[garlicnation]

@atotic is right, I misworded things.

Here's his example workaround:

function swapScript(script) {
  if (script.nodeName != 'SCRIPT')
    throw new Error("swapScript requires script");
  var clone = document.createElement('script');
  clone.appendChild( document.createTextNode(script.textContent));
  script.parentNode.insertBefore(clone, script);
  script.parentNode.removeChild(script);
};

var templateClone = document.importNode(importLink.import.content, true);
  var scripts = templateClone.querySelectorAll('script');
  for (var i=0; i<scripts.length; i++)
    swapScript(scripts[i]);
  document.body.appendChild(templateClone);

[molst]

Thanks for the workaround. I've verified it to work in FF and IE11. Cheers!

[garlicnation]

The costs of querySelectorAll on every importNode is too high to pay in the polyfill when it's so easy to work around. I'm going to close this bug with a known workaround unless there's significant clamor to add the feature.

It's possible to override document.importNode to globally work around this issue.

[dnbard]

Hello, thanks for the snippet.
Don't you think that such valuable workaround should be described somewhere at the main page ?
Like here?