Web Components

    Svelte can output web components, which is:

    a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.

    This lets you write something like this in an app to render a component created with Svelte:

    ...
    <head>
      <script defer src="/bundle.js"></script>
    </head>
    <body>
      <cool-component></cool-component>
    </body>
    ...
    

    Instructions can be found in the Svelte API documentation and a walkthrough is available in this video tutorial:

    This is an alternative to what most Svelte users export, which are Svelte components rendered by specifying the target element when instantiating the component.

    import Component from "./Component.svelte";
    
    const app = new Component({
      target: document.querySelectorAll("#svelte-component"),
      props: {},
    });