When it comes to polyfilling support for custom elements created with Angular, there are various recommendations available.
This demo demonstrates that adding the following polyfill in polyfills.ts works:
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js'
An article suggests including these imports in polyfills.ts:
import "@webcomponents/custom-elements/src/native-shim";
import "@webcomponents/custom-elements/custom-elements.min";
Additionally, another article recommends adding the following script tags to 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 -->
Given these different suggestions, the question remains: what is the correct approach to be taken specifically for Angular 9 projects involving the deployment of custom elements built with Angular?