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
srcand Rollup'slivereloadplugin 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
distfolder. - 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
License
This project is licensed under the MIT License - see the LICENSE.md file for details.
