Svelte template for custom elements with storybook and i18n configured. Allows nested Svelte components, nested styling and Svelte transitions.
Clone it with degit:
npx degit redradix/svelte-custom-element-template my-new-component
yarn install # or npm
Start making your own modifications watching changes in Storybook.
vendor folder (accesible from
<script defer src="vendor/svelte-custom-element.0.1.0.min.js"></script>
index.html and enjoy the web component
Building custom elements with Svelte is really easy but have a lot of limitations, is this template I'm trying to show the way I solve most of these limitations.
Svelte current limitations:
The code of your component lives inside
/src/index.svelte, this is the main point for either Storybook and the building process. It's important that this file has it's own style tag with content in it, otherwise we cannot inject the styles of your app inside the shadow DOM of the custom element. (read the build script)
The global styles for your Svelte component lives inside
/src/index.scss (concretely inside the class
component-styles-wrapper which is the root class), this file is important because we turn it into compiled CSS and inject it to Storybook so you can have global styles in all your stories without the need to duplicate this styles.
start: alias of
build: builds your app as a web component and outputs a minified and a normal version to
storybook: runs the storybook, this is used when develop because of the live reloading
test: runs all test inside
src/ and tries to build the widget