--- layout: layout.html title: Svelte Islands showPageCss: true ---

is-land using Svelte

Note that Svelte requires a compiler for both client and server rendering, in this case provided by Eleventy.

Scroll down

{% assign component = "./lib/svelte/my-component-js-only.svelte" | svelte %}

Using autoinit:

Using script:

{% comment %}

Super advanced use case documented for complete-ness: server-rendered, island-toggled Svelte.

{% assign component = "./lib/svelte/my-component-html-only.svelte" | svelte: page.url %} {% endcomment %}

Without hydration, the island is unnecessary.

{% assign component = "./lib/svelte/my-component-html-only.svelte" | svelte: page.url %} {{ component.html }}

{% assign component = "./lib/svelte/my-component.svelte" | svelte: page.url %}

{% comment %}{% endcomment %}