I've been struggling to figure out how to use my StencilJS web component library with Svelte. Below is the best I can come up with. Which works, but I'm wondering if it's the "correct" way to do it.
<script>
import {defineCustomElements} from "@oac/stencil-library/loader";
defineCustomElements();
</script>
<my-component></my-component>
Based on the JavaScript docs that use the CDN, it seems I should be able to load them in a single file without calling the defineCustomElements() function.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic.js"></script>
</head>
<body>
<ion-toggle></ion-toggle>
</body>
</html>
I wonder if I can do something like this with an npm installed package imported into Svelte. Along the lines of import '@oac/stencil-library' or import '@oac/stencil-library/dist/index.js', I can't seem to find an import path that works.
Also, is it possible to load in a single component? This may be a large library. We wouldn't want end users to load every component if we can help it.
Multiple approaches work, though there are differences in when/how the code is executed.
You can add scripts to the head via
<svelte:head>:This should also include the tag in server-side rendering, if you have that configured.