There is a demo shows you the minimal code and working example of how to set up a astro project to make use of Svelte compiles to Custom Element feature at https://stackblitz.com/edit/svelte-ce-on-astro-demo?file=README.md.
- Svelte allow you to compile its component to a custom element (aka Web Component)
- Astro doesn't have a guide on how to do this but I figured out how to and thus the sharing
<!-- SvelteCounter.svelte -->
<!-- this one file transforms into a regular svelte component and a custom element thanks to the line below -->
<svelte:options customElement={{ tag: "svelte-counter" }} />
<script>
let count = $state(0);
function handleClick() {
count += 1;
}
let { message = 'default message' } = $props();
</script>
<details open style="margin: 1rem;">
<summary>
{ message }:
</summary>
<button style="margin-left:1rem;" on:click={handleClick}>
clicks: {count}
</button>
</details>---
// pages/regular.astro
import Layout from '../layouts/Layout.astro';
import SvelteCounter from '../components/SvelteCounter.svelte';
---
<Layout>
<details open>
<!-- ... -->
<SvelteCounter client:load message="regular hydration" />
</details>
</Layout>---
// pages/mixed.astro
import Layout from '../layouts/Layout.astro';
import SvelteCounter from '../components/SvelteCounter.svelte';
---
<Layout>
<SvelteCounter client:load message="regular hydration" />
<details open>
<!-- ... -->
<svelte-counter message="as custom element" />
</details>
</Layout>---
// pages/as-web-comp.astro
import Layout from '../layouts/Layout.astro';
---
<Layout>
<script>
// unline the case with ./mixed.astro, we will need to import this on the client side to register the custom element
import {} from '../components/SvelteCounter.svelte';
</script>
<details open>
<!-- ... -->
<svelte-counter message="as custom element" />
</details>
</Layout>This usage is why I was interested in utilizing Svelte's custom element compiling in the first place.
---
// pages/with-alpine.astro
import Layout from '../layouts/Layout.astro';
---
<Layout>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<script>
// unline the case with ./mixed.astro, we will need to import this on the client side to register the custom element
import {} from '../components/SvelteCounter.svelte';
</script>
<script is:inline>
const animals = ["pig", "cow", "lion", "elephant"];
function getRandomInt(max) {
return Math.floor(Math.random() * max);
}
function randomAnimal() {
return animals[getRandomInt(animals.length)];
}
</script>
<details open>>
<!-- ... -->
<div style="margin: 1rem;" x-data="{list:[randomAnimal()]}">
<button @click="list.push(randomAnimal())">click to add more</button>
<template x-for="(item, i) in list">
<svelte-counter x-bind:message="'' + (i+1) + '-' + item" />
</template>
</div>
</details>
</Layout>
// astro.config.mjs
// @ts-check
import { defineConfig } from 'astro/config';
import svelte from '@astrojs/svelte';
// https://astro.build/config
export default defineConfig({
integrations: [
svelte({
compilerOptions: {
customElement: true, // this is the one that what should tell Svelte to compile components to CEs
},
}),
],
});There are a bit more code you can take a look and also get to interact with the demo at https://stackblitz.com/edit/svelte-ce-on-astro-demo?file=README.md.
(not really) related links: