Web components with Svelte

With Svelte, web components can be created and used.

The integration is ridiculously easy, at least in normal Svelte, which is usingCSR:

<script>
  import Greeter from './webcomponent.js'
 
  customElements.define('x-greeter', Greeter)
</script>
 
<main>
  <h1>Welcome to SvelteKit</h1>
 
  <x-greeter></x-greeter>
</main>

It is a little bit more difficult inSvelteKit:

<script>
  import { onMount } from 'svelte'
 
  let message = 'Hello from SvelteKit!'
 
  onMount(async () => {
    // Dynamically import the web component on the client side
    const component = await import('../lib/webcomponent.js')
 
    // Create a new instance of the web component
    customElements.define('my-web-component', component.default)
  })
 
  function handleCustomEvent(event) {
    alert(event.detail)
  }
</script>
 
<main>
  <h1>Web Component in SvelteKit Example</h1>
  <my-web-component {message} on:customEvent={handleCustomEvent}
  ></my-web-component>
</main>