Build with compile to ES5 doesn't include custom-elements-es5-adapter.js

danners commented 7 years ago

Description

I tried making a Polymer 2 component that includes components written in the new es 6 syntax work with IE11. For that i used polymer build on a index.html that includes webcomponents-lite and also includes a Polymer 2 webcomponent written in ES6. It transpiled succesfully, however the result is not working since it doesn't include custom-elements-es5-adapter.js. When i add this manually to the result the index.html can be loaded and the webcomponents can be loaded too in IE11.

Looking at the code from polymer build it seems that custom-elements-es5-adapter.js is only included when the webcomponent loader is used. Can this be changed to be included also when webcomponents-lite.js is included ?

Versions & Environment

Polymer CLI: 0.18.0-pre.15

Expected Results

custom-elements-es5-adapter.js is included when i compile to es5

Actual Results

its not included only when i use the loader.js in the index.html

rictic commented 7 years ago

@FredKSchott who is working on this feature now

FredKSchott commented 7 years ago

@danners thanks for bringing this up. I'll make sure the new fix will handle both -loader & -lite

themindfuldev commented 7 years ago

I am having a similar issue and I found a solution that works for me.

Disclaimer: I don't use an app-shell because I have a server-side rendered site with just a few isolated Polymer components on the client-side.

After intense debugging the issue came down to the fact that I was including this block (as suggested on the Polymer guides):

<div id="autogenerated-ce-es5-shim">
  <script type="text/javascript">
    if (!window.customElements) {
      var ceShimContainer = document.querySelector('#autogenerated-ce-es5-shim');
      ceShimContainer.parentElement.removeChild(ceShimContainer);
    }
  </script>
  <script type="text/javascript" src="/vendors/webcomponentsjs/custom-elements-es5-adapter.js"></script>
</div>

Because when I ran polymer build it would pick up custom-elements-es5-adapter.js from there.

This is what I did instead:

<script type="text/javascript">
  if (window.customElements) {
    document.write('<scr' + 'ipt type="text/javascript" src="/vendors/webcomponentsjs/custom-elements-es5-adapter.js"></scr' + 'ipt>');
  }
</script>

YES it's not as elegant and quite rustic but, hey, it works! Here I'm tricking the compilers inside polymer build and they won't find this file and hence they won't include it in the build.

I hope it helps!

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