Svelte Custom Element Template

Dan6erbond
5

Svelte custom elements (WebComponent) template with Prettier and ESLint!

Svelte Custom Element Template

This is a project template for Svelte custom elements. It lives at https://github.com/Dan6erbond/svelte-custom-element-template.

To create a new project based on this template, clone this repository:

git clone https://github.com/Dan6erbond/svelte-custom-element-template.git

Note that you will need to have Node.js and Yarn installed on your machine.

Get Started

Install dependencies:

cd svelte-custom-element-template
yarn

Run the development server:

yarn dev

Open http://localhost:5000 in your browser. You should see a simple page with a "Hello, world!" message and a counter. Edit a component file in src and Rollup's livereload plugin will update the page in the browser.

By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the srv commands in the package.json file to include the option --host 0.0.0.0 or add the option when running the development server.

What's Included

Svelte custom elements with reactivity, slots and CSS.
Nested custom elements to showcase shadow DOM and CSS scoping.
Event emitting and event listening in custom elements and index.html.
Using reserved keywords in Svelte <script> tags.
Helpful code comments to understand the concepts when building Web Components.

Scripts

build: Builds the project for production.
dev: Runs the development server.
start: Starts the production server with built files.
check: Runs the Svelte & Typescript code checker.
lint: Runs ESLint with the Prettier plugin.
format: Runs Prettier.

Building for Production

Run the production build:

yarn build

The built files are in the dist folder.
Include the bundle in your HTML:

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Svelte Custom Element</title>
    <script src="bundle.js"></script>
  </head>
  <body>
    <my-custom-element></my-custom-element>
  </body>
</html>

Using Typescript

This template is already setup with Typescript. Simply add lang="ts" to your <script> tag to use Typescript or use the .ts extension for your Typescript files.

Contributors

Dan6erbond

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

Top categories