Skip to content

Template for getting started making custom elements / webcomponents with svelte 4

Notifications You must be signed in to change notification settings

scott97/svelte-4-custom-elements

Repository files navigation

Svelte custom elements starter project

Svelte 4 supports custom elements but there are a few tricky bits that can make life a little difficult 😠. This project shows some solutions to common problems.

Problem 1: Components ignore global css

Custom elements can be used with or without the shadow dom. With the shadow dom, components are isolated and cannot by styled from the page's css. Without the shadow dom, components cannot use slots, a very important feature that you likely depend on.

One solution is to use <link> tags within your component but this results in a flash of unstyled content

The solution is to use constructable stylesheets and attached them to the shadowRoot of the element. Now, you get the best of both worlds - global styles and slots.

Problem 2: Too much boilerplate

The official svelte docs recommend you place the following in your main.js / main.ts:

import MyElement from './MyElement.svelte';
customElements.define('my-element', MyElement.element);

What if you have lots and lots of components? You would have to repeat this many times. Probably not a massive issue but we can do better. If you are using Vite, use its glob import feature to remove the repetition:

const modules = import.meta.glob('./lib/**/*.svelte', {eager: true})
for (const path in modules) {
    const mod = modules[path] as SvelteModule
    const el = mod.default.element

    // Determine component name from file name.
    const filename = path.split('/').pop()
    const componentName = filename.slice(0,-7)

    // Register custom element.
    customElements.define(`${prefix}-${componentName}`, el)
}

About

Template for getting started making custom elements / webcomponents with svelte 4

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published