svelte-custom-components

A simple utility that allows you to use Svelte components as Web Components, but without shadow DOM.

Suitable for testing and experimenting.

Start

You need Node for this to install dependencies...

npm install

...then start Rollup:

npm run dev

It will start dev server and open browser on localhost:5000. Edit a component file in src, save it, and reload the page to see your changes.

Use it

The connect utility function is a wraper that takes few options: tag name, Svelte component and list of properties that you want to pass to custom element.

In src/index.js you will use:

import connect from "./utils/connect";
import Component from "./components/Component.svelte";

connect("custom-component", Component, { ...props });

Then in index.html:

<custom-component attribute="value">
    Hello
</custom-component>

Examples

Here we'll cover some basic examples following Vue.js guides like here, just for fun. Additionally, there is this fancy Vue.js adapter if you are wondering to use Svelte components inside Vue or React.

While it's not perfect, you can link data and DOM to make it 'reactive'. As you can see below, we are using app.message to control value of message property. Open browser's JavaScript console and set app.message to a different value... Nice!

<!-- index.html -->
<app-component message="app.message" />

<script>
  var app = {
    message: "Hello Svelte!"
  };
</script>

<!-- AppComponent.svelte -->
<script>
  export let message = "";
</script>

<div>{message}</div>

// index.js
import AppComponent from "./components/AppComponent.svelte";

connect("app-component", AppComponent, {
  message: String
});