javascript - Polyfill 支持 Angular 9 自定义元素？

Question

对于使用 Angular 构建的自定义元素的 Polyfilling 支持，Angular 有什么建议？

This demo works仅将此polyfill添加到polyfills.ts中:

import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js'

This article说我们应该在 polyfills.ts 中包含以下内容:

import "@webcomponents/custom-elements/src/native-shim";
import "@webcomponents/custom-elements/custom-elements.min";

And this article说我们应该将以下内容添加到 index.html:

<script src="webcomponents/webcomponents-loader.js"></script>
<script>
  if (!window.customElements){document.write('<!--');}
</script>
<script src="webcomponents/custom-elements-es5-adapter.js"></script>
<!-- ! DO NOT REMOVE THIS COMMENT, WE NEED ITS CLOSING MARKER -->

所以是有区别的。在部署使用 Angular 构建的自定义元素时，哪种方法对于 Angular 9 项目来说是正确的？

Answer 1

这完全取决于您想要支持的浏览器以及您的应用程序生成的捆绑语法。

@webcomponents/custom-elements/src/native-shim 和 @webcomponents/webcomponentsjs/custom-elements-es5-adapter.js 具有相同的目的，这些如果浏览器不支持 ES2015 模块或者因为应用程序被显式配置为生成仅 ES5 的 bundle ，则使用。

@webcomponents/custom-elements 和 @webcomponents/custom-elements/src/native-shim 也有相同的目的，即为自定义元素提供支持本身不支持自定义元素的浏览器。

有关这些 polyfill 以及为什么以及何时需要它们的更多信息；

• https://github.com/webcomponents/polyfills/tree/master/packages/custom-elements
• https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs

我不建议使用以下模式。

<script src="webcomponents/webcomponents-loader.js"></script>
<script>
 if (!window.customElements){document.write('<!--');}
</script>
<script src="webcomponents/custom-elements-es5-adapter.js"></script>
<!-- ! DO NOT REMOVE THIS COMMENT, WE NEED ITS CLOSING MARKER -->

更好的选择是；

<script src="webcomponents/webcomponents-loader.js"></script>
<script nomodule src="webcomponents/custom-elements-es5-adapter.js"></script>