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 包，则使用它们。

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

有关这些 polyfill 以及需要它们的原因和时间的更多信息；

我不推荐使用下面的模式。

<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>

Polyfill 支持 Angular 9 个自定义元素？

Polyfill Support for Angular 9 Custom Elements?

javascript

web-component

typescript

angular

angular-elements