Webcomponentsjs polyfill 在 IE11 中不起作用（没有足够的堆栈空间）答案

【问题标题】：Webcomponentsjs polyfill does not work in IE11 (not enough stack space)Webcomponentsjs polyfill 在 IE11 中不起作用（没有足够的堆栈空间）
【发布时间】：2020-02-11 13:29:35
【问题描述】：

在我的 Angular8 项目中，我需要支持 CustomElements 和 ShadowDom。在脚本部分的 angular.json 文件中，加载了包：

"scripts": [
          "node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-sd-ce-pf.js"
        ],

在 Edge 中，一切正常，但 Internet Explorer 抛出“ERROR Error: Uncaught (in promise): Error: Not enough stack space.”。根据this issue，有些人有类似的错误，因为 polyfills 与 webcomponentsjs 包冲突。

我也删除了提到的 polyfill，但错误仍然存在。

这是我的 polyfill 的完整列表：

import 'core-js/es/symbol';
import 'core-js/es/function';
import 'core-js/es/parse-int';
import 'core-js/es/parse-float';
import 'core-js/es/number';
import 'core-js/es/math';
import 'core-js/es/object';
import 'core-js/es/array';
import 'core-js/es/date';
import 'core-js/es/regexp';
import 'classlist.js';
import 'core-js/es/reflect';

import 'zone.js/dist/zone';

import 'regenerator-runtime/runtime.js';
import 'custom-event-polyfill';
import 'url-polyfill';
import 'css-vars-ponyfill';
import '@babel/polyfill';
import 'intersection-observer';

我也尝试加载包或 webcomponentsjs-loader.js 并等待 WebComponentsReady 事件，但它也没有效果。

【问题讨论】：

标签： angular internet-explorer web-component

【解决方案1】：

您也可以参考 GitHub 中的this thread。它提到了另一个帖子中的解决方案，它在webcomponents-loader 之前加载core-js，你可以试试：

<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/core-js/2.5.7/core.min.js"></script>
  <script src="./@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
</head>

此外，作者还给出了his solution，如下所示。看来webcomponents-loader使用的Symbol polyfill会导致IE11中的堆栈溢出：

<script src="//cdn.polyfill.io/v2/polyfill.min.js"></script>
<script src="./@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>

【讨论】：