Angular11 + webcomponents/polyfills + IE11 == nojoy

Question

我们正在使用Angular 11作为开发工具，使用createCustomElement开发一个W3C自定义元素(又称Web组件)库。我们需要支持IE11，所以我们尝试使用webcomponents/polyfills。我们需要支持<slot>%s，这样我们的组件才能使用encapsulation: ViewEncapsulation.ShadowDom。我已经用这种方式制作了一个非常简单的组件(从this派生)，并且有一个简单的无框架页面来呈现这个web组件。使用webcomponents加载器时，IE中的页面会出现"IE11 SCRIPT28 Out of stack space“错误-- morewry在this issue中对此错误进行了深入分析，但没有解决方案。有一些对Object.getOwnPropertySymbols的修复(链接在那个线程中)，但这些都是2.5年前的事了；我正在使用最新的@webcomponents/webcomponentsjs@2.5.0，但是堆栈空间不足的错误仍然存在。我尝试过通过不同的方法加载polyfills，包括webcomponents-loader.js、webcomponents-bundle.js和webcomponents-sd-ce-pf.js的变体，但每种方法都有不同的问题。

最终，当务之急是在加载webcomponents-loader.js时，我会得到：

SCRIPT28: Out of stack space
webcomponents-sd-ce-pf.js (65,290)
SCRIPT2343: Stack overflow at line: 65

偶尔，我会遇到这样的错误：

Object doesn't support property or method 'attachShadow'

..。但是我没有异步加载脚本，而且我每次都会清除IE浏览器缓存，所以我不明白为什么会发生这种变化。为了解决这个错误，我先加载了shadydom，然后再加载webcomponentsjs (这应该不是必需的)，然后我又回到了Out of Stack Space错误。

从Angular 11构建的角度来看，我的tsconfig.json有"compilerOptions.target": "es2015"，它为我提供了差异加载脚本。

polyfills.ts有

(window as any).__Zone_enable_cross_context_check = true;
import 'document-register-element';

我有一个小的，完整的演示项目here。不用说，这个web组件在Chrome中是没有错误的。

有很多关于Stack Overflow和Angular和Webcomponents的问题；许多都很老了，解决方案也不清楚。我使用的是最新版本的所有内容(angular、webcomponents和IE11)，使用的是一个非常简单的示例，但无法正常工作。我不清楚解决方案是Angular还是Webcomponents，所以我在这里发帖，如果我们能专注于此，就可以解决合适的github问题。

提前感谢！

附加信息:通过从polyfills.ts中删除document-register-element并将//unpkg.com/@ungap/custom-elements添加为我的index.html中的第一个脚本，我得到了一个错误ERROR TypeError: Object doesn't support property or method 'attachShadow'，所以我添加了//unpkg.com/@webcomponents/shadydom@1.8.0/shadydom.min.js，然后错误变成了NotFoundError。除了许多常量之外，该错误中唯一的信息似乎是Symbol()_8.lacmbwvaqyq: undefined, Symbol(rxSubscriber)_i.lacmbwvaqyq: undefined,)。我唯一能找到的Symbol实现似乎来自@webcomponents/webcomponentsjs@2.5.0 polyfill，显然是在他们的“平台”代码中。对这种情况有什么想法吗？或者关于我应该追求的其他策略的建议？

有一件事我找不到区别，那就是@ungap/custom-elements的实现是否是@webcomponents/webcomponentsjs的替代方案--我怀疑它是，然而，ungap似乎没有shadyDOM实现。

尽管stackoverflow不鼓励感恩的评论，但我对这件事上的任何帮助都很感谢！

Answer 1

我在使用IE11时遇到了这个问题，为了解决这个问题，我从polyfills.ts中删除了'document-register-element'，并在我的Angular捆绑包之前将其加载到页面上。

问题是'document-register-element'必须先运行，然后 IE11才能使用ES6+功能进行填充(由core-js提供)。

由于core-js现在被命令行界面隐藏(它曾经在polyfills.ts中)不能调整浏览器解析功能的顺序，并且'document-register-element'的工作方式是根据加载时可用的es2015+函数填充浏览器，如果Angular已经填充了缺少的部分，则'document-register-element'无法确定它需要正确执行哪些操作，因此失败。

另外，要注意的是，作者现在已经弃用了这个库，并建议在GitHub上进行替换。