With Svelte, web components can be created and used.

The integration is ridiculously easy, at least in normal Svelte, which is using #CSR:

<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 in #SvelteKit:

<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>