Use of @vaadin/date-picker in IE.

Flow
1

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?

2

Hi, according to Stencil documentation, it should indeed add the polyfills automatically. But apparently in this case it for some reason doesn’t. I’m not that familiar with Stencil to guess why this is.