Edge crashes with vulcanized page and protocol file://

edoardocavazza commented 8 years ago

Hi,

I have bundled my polymer components using vulcanize, but when I try to open the page in Edge browser, it redirects me at the URL: ms-appx-web:///assets/errorpages/acr_error.htm#file:///path/to/index.html.

Here a sample:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div hidden="" by-vulcanize="">
        <dom-module id="hello-world" assetpath="../components/hello-world/">
            <template>
                Hello!
            </template>
        </dom-module>
    </div>
        <script type="text/javascript">alert('here')</script>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

Considerations:

The alert never fires
Removing the <template> tag, Edge CAN load the whole page
If I put a any <script> (empty too) BEFORE all <dom-module> declarations, Edge CAN load the whole page

Thanks

edoardocavazza commented 7 years ago

I have resolved this issue importing the webcomponents polyfill BEFORE any <template> tag using the crisper flag --script-in-head.

englishextra commented 7 years ago

@edoardocavazza I'd like to confirm that

IE11 - you can set webcomponents' polyfill even after template tags, and with another polyfill you have to add css display none

Edge13 - webcomponents' or other polyfill in head, no css display none needed, and if you dont use polyfill and leave template tags, Edge redirects or crashes:

so what I do:

<head>
<style>
  template{display:none;}/*for IE11*/
</style>
<script>
  function templatePolyfill(){'use strict';if('content'in document.createElement('template')){return false;}var templates=document.getElementsByTagName('template');var plateLen=templates.length;for(var x=0;x<plateLen;++x){var template=templates[x];var content=template.childNodes;var fragment=document.createDocumentFragment();while(content[0]){fragment.appendChild(content[0]);}template.content=fragment;}};if(typeof exports==='object'){module.exports=templatePolyfill;}templatePolyfill();
</script>
</head>
  <body>
    <div id="container">
      <div id="menu-list"></div>
      <template id="template-menu-list">
        <ul>
          {{@globalNavigationLinks}}<li><a href="{{%_val.url}}">{{=_val.text}}</a></li>{{/@globalNavigationLinks}}
        </ul>
      </template>

the polyfills mentioned above: https://github.com/webcomponents/template/blob/master/template.js https://github.com/jeffcarp/template-polyfill/blob/master/index.js

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Polymer / tools

Edge crashes with vulcanized page and protocol file:// #1892