Custom Templates

Plugin provided templates

By default the plugin comes with two templates:

lazy.template

<svelte:options customElement={{ tag: '{{CUSTOM_ELEMENT_TAG}}', shadow: '{{SHADOW_MODE}}' }} />

<script>
    // svelte-ignore custom_element_props_identifier
    let props = $props();
</script>

{#await import('{{SVELTE_PATH}}') then { default: Component }}
	<Component {...props}/>
{/await}

eager.template

<svelte:options customElement={{ tag: '{{CUSTOM_ELEMENT_TAG}}', shadow: '{{SHADOW_MODE}}' }} />

<script>
    // svelte-ignore custom_element_props_identifier
    let props = $props();
    import Component from '{{SVELTE_PATH}}';
</script>

<Component {...props} />

INFO

We suppress Sveltes custom_element_props_identifier warning, because the generated custom component can't know wich props you will pass or expect in your component. By default all props will be passed down.

Creating your own Template

If you want to use your own template follow these steps:

Create folder

For this example we will use src/template

Define templatefolder in config

vite.config.ts

export default defineConfig({
    plugins: [
        svelteAnywhere({
            templatesDir: './src/template'
        }),
    ]
});

Add your template

Copy one of the templates and adjust to your needs

src/template/dance.template

<svelte:options customElement={{ tag: '{{CUSTOM_ELEMENT_TAG}}', shadow: '{{SHADOW_MODE}}' }} />

<script>
    // svelte-ignore custom_element_props_identifier
    let { ...props } = $props();
    import Component from '{{SVELTE_PATH}}';
    console.log('Let's dance!);
</script>

<Component {...props} />

The Plugin will replace {{CUSTOM_ELEMENT_TAG}}, {{SHADOW_MODE}} and {{SVELTE_PATH}} according to your component and annotation used.

Use your template

/src/lib/MyComponent.svelte

<!-- @custom-element my-component template="dance" -->

You can use any of the templates, either your custom ones or still the provided ones.