javascript - HTML Templates and HTML Import - Inner Script not Executing in Firefox -
i using webcomponents.js polyfill firefox support of web components.
when loading html template through html import, script within template not execute once custom-element based on template added dom of main page.
it execute when running site in chrome (which has native web components support).
however, both firefox , chrome execute such script when template placed within main page itself.
see example eric bidelmann @ html5rocks. runs both in chrome , in firefox (via webcomponents.js) - long template located in same html file.
<!doctype html> <html> <body> <button onclick="useit()">use me</button> <div id="container"></div> <script> function useit() { var content = document.queryselector('template').content; // update in template dom. var span = content.queryselector('span'); span.textcontent = parseint(span.textcontent) + 1; document.queryselector('#container').appendchild( document.importnode(content, true)); } </script> <template> <div>template used: <span>0</span></div> <script>alert('thanks!')</script> </template> </body> </html> but while template text shows, not run when loading template , content via html import link. mentioned, loads content, isn't executing script in firefox.
is bug in webcomponents.js, or bug in firefox? having idea workarounds (other "use polymer or angular")?
note - based on using firefox 43 , chrome 47.
it not bug in firefox, internet explorer 11 has same behaviour (with webcomponents.js).
the importnode method not polyfilled webcomponents.js. that's why <script> elements not activated when imported.
there issue opened related problem.
my workaround: don't insert scripts tags <script> inside imported <template> (js/html separated:).
also, parse <template> looking <script> tags , try activate/execute them manually (could tricky...)
Comments
Post a Comment