I’m demoing a button that gets called like this:
<my-button>Click Me</my-button>
I have published and am distributing via a CDN I link in the head of the index file:
<script type="module" src="https://unpkg.com/@name/module-name"></script>
I notice now that it’s published, there is some flickering in the styling of the button on page load, where the button label (Click Me) will show as raw unstyled HTML for a split second before the styling kicks in. I assume that this is because that text is slotted in the component, and the HTML is being loaded in prior to the script file for the Stencil library.
Is there a way to solve for this styling flicker?
I know that scripts that are type="module" are async so the HTML is loading in faster than the script tag. Is there a way to use the library without it being a module?
https://stenciljs.com/docs/javascript
This page seems to indicate yes, but unless I put type="module" on the script tag, it doesn’t work. The error says I can’t use an import statement on a non-module script, and Stencil auto-generates an import statement at the top of this file that gets served up by the CDN:
dist/project-name/project-name.esm.js