I have a StencilJS app where I’m embedding Vaadin components 14.1.25. Specifically, I’m using the @vaadin/date-picker. I’ve got it working in Safari / Chrome / Firefox, but I can seem to get it working in IE. I build my stencil app with npm run build -- --es5
and start it the same way, the transpilation seems to go fine, but the Vaadin Date-picker still tries to use a shadow DOM which fails in Edge and IE.
Is there some other step I should be taking here?
–Edit–
I now realize that the following polyfill header in my HTML file is still required:
<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 -->
But I was under the impression that StencilJS was already polyfilling a bunch of the webcomponent calls. Are there two sets of polyfills going on?