Question

Angular对于使用Angular构建的自定义元素的Polyfilling支持建议如何？

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也具有相同的目的，即为本身不支持自定义元素的浏览器提供自定义元素的支持。

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

我不建议您使用以下模式。

<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自定义元素？

1 个答案: