Svelte 3 Web Component Button with WindiCSS & Storybook

This repository shows you how to create a reusable web component using Svelte. Exposed with documentation using Storybook.

Table of Contents

• Prerequisites
• Installation
• Folder organization
• Usage

Prerequisites

• Node.JS version ^14.17.0 || >=16.0.0

Installation

1. Clone the git repository

   git clone https://github.com/smarlhens/svelte3-web-component-button.git
   

2. Go into the project directory

   cd svelte3-web-component-button/
   

3. Install NPM dependencies

   npm i
   

Folder organization

• src/components: contains web components written with Svelte
• src/stories: contains stories for Storybook

Usage

CustomButton.svelte:

<custom-button label="Button" disabled="false"></custom-button>

Example of usage in public/index.html.
Use npm run dev or npm run build & npm run start to test the rendering of the web component in your application.

Known issues

ESLint warning: it is expecting svelte.config.js to contain customElement: true. As we are using rollup.config.js, we do not need svelte.config.js. customElement: true is already used.

The 'tag' option is used when generating a custom element. Did you forget the 'customElement: true' compile option?