Angular11 + webcomponents/polyfills + IE11 == nojoy

Question

我们正在使用 Angular 11 作为开发工具，使用createCustomElement开发 W3C 自定义元素库（又名 Web 组件）。 我们需要支持 IE11，所以我们正在尝试使用webcomponents/polyfills 。 我们需要支持<slot>以便我们的组件使用encapsulation: ViewEncapsulation.ShadowDom 。 我以这种方式制作了一个非常简化的组件（源自this ），并且有一个简单的无框架页面来呈现这个 web 组件。 使用webcomponents-loader时，IE中的页面，出现“IE11 SCRIPT28 Out of stack space”的页面错误——morewry在this issue中对此错误进行了深入分析，但没有解决。 Object.getOwnPropertySymbols有一些修复（链接在那个线程中），但那些是 2.5 年前的； 我正在使用最新的@webcomponents/webcomponentsjs@2.5.0 ，但堆栈空间不足错误仍然存在。 我尝试通过不同的方式加载 polyfill，包括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 浏览器缓存，所以我不明白为什么会发生这种变化。 为了解决这个错误，我在 webcomponentsjs 之前加载了 shadydom（这应该不是必需的），然后我又回到了 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';

我在这里有一个小而完整的示范项目。 这个 web 组件在 Chrome 中呈现无错误，不用说。

Stack Overflow 和 Angular 和 Webcomponents gh 问题上有很多张贴的问题； 很多都非常老了，决议还不清楚。 我正在使用一个非常简单的示例使用最新版本的所有内容（角度、webcomponents 和 IE11），但无法使其正常工作。 我不清楚解决方案是在 Angular 还是 Webcomponents 中，所以我在这里发帖，如果我们可以对此进行归零，go 是否可以解决相应的 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 ，显然是在他们的“平台”代码中。 对这种情况有什么想法吗？ 或者推荐我应该追求的其他技巧？

我无法区分的一件事是@ungap/custom-elements的实现是否是@webcomponents/webcomponentsjs的替代方案——我怀疑它是，但是，ungap 似乎没有 shadyDOM 实现。

即使 stackoverflow 不鼓励感谢评论，我对此事的任何帮助都很高！

Answer 1

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

问题是必须在IE11 使用 ES6+ 功能（通过core-js ）填充之前运行'document-register-element' 。

由于core-js现在被 CLI 隐藏（它曾经在polyfills.ts中）无法调整浏览器解析功能的顺序，并且'document-register-element'通过基于es2015+功能的浏览器填充来工作加载时可用，如果 Angular 已经填充了缺失的部分， 'document-register-element'无法确定它需要正确执行的操作，因此失败。

另请注意，作者现在已弃用该库，并建议在GitHub上进行替换。