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.gitNote that you will need to have Node.js and Yarn installed on your machine.
- 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.
- 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.
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.
- 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>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.
This project is licensed under the MIT License - see the LICENSE.md file for details.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent