Search code examples
angularinternet-explorer-11web-componentcustom-elementlit-element

Issue with hosting lit-element based Web Component in angular 9 application

I have created a web component using lit-element, lit-html. It renders fine in modern browsers as well as in IE 11 using webcomponents-loader.js.

But the same web component if I load in Angular application, it just doesn't render. Using the following script tags in the index.html file.

<script src="http://xxxx/webcomponents-loader.js"></script>
<script src="https://xxxxxx/mycomponent.js" type="module"></script>
<script src="https://xxxxxxx/mycomponent.IE.js" nomodule=""></script>

Getting following errors

SCRIPT28: Out of stack space

enter image description here

Solution

  • I have been able to resolve this issue by importing core-js just before webcomponents.js

    Reference from https://github.com/webcomponents/webcomponentsjs/issues/968#issuecomment-402674742

    I'm still trying to understand as if there are better options.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/core.min.js">   </script>
<script src="http://xxxx/webcomponents-loader.js"></script>
<script src="https://xxxxxx/mycomponent.js" type="module"></script>
<script src="https://xxxxxxx/mycomponent.IE.js" nomodule=""></script>