Make awesome WebComponents with Svelte
Tags: svelte, webcomponents, javascript, webdev
Published: 2021-04-07 17:25:35

---
title: Make awesome WebComponents with Svelte
published: true
description: Create your HTML5 Web Component with Svelte. Made your web components with this friendly boilerplate.
tags: svelte, webcomponents, javascript, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pnysdgljxd220m2uovk0.png
---

# 🏗 svelte-webcomponent-boilerplate

Create your HTML5 Web Component with Svelte. Made your web components with this friendly boilerplate.

[https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/](https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/)

## 📎 Menu

-   💡 [Features](https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/#-features)
-   🕹 [Demo](https://codepen.io/ptkdev/pen/jOyNmEQ)
-   👔 [Screenshot](https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/#-screenshot)
-   🚀 [How to use](https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/#-installation)
-   -   🌎 [Web](https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/#-installation-web)
-   -   📦 [Webpack/Browserify](https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/#-installation-npm-module---browserifywebpack)
-   -   📖 [Wordpress](https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/#-installation-wordpress)
-   -   🔵 [React](https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/#-installation-react)
-   -   🔴 [Angular](https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/#-installation-angular)
-   -   🟠 [Svelte](https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/#-installation-svelte)
-   -   🟢 [Vue](https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/#-installation-vue)
-   -   🧰 [Options / Attributes](https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/#-options--attributes)
-   -   🎨 [CSS Customization](https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/#-css-customization)
-   🔨 [Developer Mode](https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/#-developer-mode)
-   -   ⚡ [Run Project](https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/#-run-project)
-   -   💾 [Setup Project](https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/#-setup-project)

## 💡 Features

-   [✔️] Easy to use
-   [✔️] MIT License
-   [✔️] Text animation by [Nooray Yemon](https://codepen.io/yemon) on [Codepen](https://codepen.io/yemon/pen/pWoROm)
-   [✔️] Friendly boilerplate + Github templates
-   [✔️] Powered by svelte framework
-   [✔️] Without jQuery depencence
-   [✔️] Configurable with attributes
-   [✔️] Customization with CSS Style
-   [✔️] HTML5 Custom Elements - Native webcomponents
-   [✔️] Work with: Browserify / Webpack / ReactJS / Svelte / Angular / Vue / Wordpress
-   [✔️] Typescript + TSPaths preconfigured
-   [✔️] Userfriendly folders tree
-   [✔️] Prettiers and ESLint preconfigured
-   [✔️] all-contributors-cli and all-shields-cli preconfigured
-   [✔️] JEST Test preconfigured
-   [✔️] Full async code
-   [✔️] Github and Vscode dotfiles preconfigured
-   [✔️] Translations i18n: 🇬🇧 🇮🇹 🇵🇱 (Help me ❤️)

## 👔 Screenshot

See [Demo here](https://codepen.io/ptkdev/pen/jOyNmEQ).

[![WebComponent: Svelte WebComponent Boilerplate](https://raw.githubusercontent.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/main/.github/assets/screenshot.png)](https://raw.githubusercontent.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/main/.github/assets/screenshot.png)

## 🚀 Installation (Web)

1. Add html code to your page:

```html
<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>
```

2. Require javascript in yourpage (before `</body>`):

```html
<script src="https://cdn.jsdelivr.net/npm/@ptkdev/svelte-webcomponent-boilerplate@latest/dist/webcomponent.js"></script>
```

You can replace `@latest` with specific version, example `@2.0.1`.

Below is available a description of `options` values.

## 📦 Installation (NPM Module - Browserify/Webpack)

1. Install npm module: `npm install @ptkdev/svelte-webcomponent-boilerplate --save`
2. Add html code to your page:

```html
<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>
```

3. Require javascript in your app:

```javascript
require("@ptkdev/svelte-webcomponent-boilerplate");
```

or

```javascript
import "@ptkdev/svelte-webcomponent-boilerplate";
```

Below is available a description of `options` values.

## 📖 Installation (Wordpress)

1. Download wordpress plugin from [mirror](https://cdn.jsdelivr.net/npm/@ptkdev/svelte-webcomponent-boilerplate@latest/dist/wordpress/svelte-webcomponent-boilerplate-wordpress-plugin.zip) and install it.
1. Add code to your html widget, example: `Appearance` --> `Widget` --> insert `HTML Widget` and paste html code:

```html
<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>
```

You can insert this html code in posts, widget, html box or theme.

## 🔵 Installation (React)

1. Install npm module with `npm install @ptkdev/svelte-webcomponent-boilerplate@latest --save`:
2. Import module in your `src/App.js` on header:

```javascript
import "@ptkdev/svelte-webcomponent-boilerplate";
```

3. Add html code to your `App.js` template:

```html
<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>
```

## 🔴 Installation (Angular)

1. Install npm module with `npm install @ptkdev/svelte-webcomponent-boilerplate@latest --save`:
2. Import module in your `app/app.modules.ts` on header:

```javascript
import "@ptkdev/svelte-webcomponent-boilerplate";
```

3. Add html code to your html component:

```html
<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>
```

## 🟠 Installation (Svelte)

1. Install npm module with `npm install @ptkdev/svelte-webcomponent-boilerplate@latest --save`:
2. Import module in your `src/App.svelte` on header:

```javascript
import "@ptkdev/svelte-webcomponent-boilerplate";
```

3. Add html code to your html component:

```html
<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>
```

## 🟢 Installation (Vue)

1. Install npm module with `npm install @ptkdev/svelte-webcomponent-boilerplate@latest --save`:
2. Import module in your `src/App.vue` and add webcomponent to ignoreElements of vue config:

```javascript
import Vue from "vue";
import "@ptkdev/svelte-webcomponent-boilerplate";

Vue.config.ignoredElements = ["svelte-webcomponent-boilerplate"];
```

3. Add html code to your html component:

```html
<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>
```

## 🧰 Options / Attributes

| Parameter | Description                                  | Values             | Default value                     | Available since |
| --------- | -------------------------------------------- | ------------------ | --------------------------------- | --------------- |
| header    | Setup top text                               | String             | `make`                            | v1.0.20210319   |
| flip      | Setup middle flip text (separte with commas) | String with commas | `svelte,webcomponents,opensource` | v1.0.20210319   |
| footer    | Setup bottom text                            | String             | `awesome!`                        | v1.0.20210319   |

#### HTML Code with attributes:

```html
<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>
```

## 🎨 CSS Customization

You can overwrite default css with selector `::part`, example:

```html
<style>
	svelte-webcomponent-boilerplate::part(flip) {
		border: 2px solid red;
	}
</style>
```

Part attribute is, generally, suffix of a class. Use chrome inspector for get the correct value of `part=""` attributes. See [MDN selector ::part docs](https://developer.mozilla.org/en-US/docs/Web/CSS/::part).

## 🔨 Developer Mode

#### 🏁 Run Project

1. Clone this repository or download [nightly](https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/archive/nightly.zip), [beta](https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/archive/beta.zip) or [stable](https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/archive/main.zip).
2. Run `npm run init`
3. Run `npm run dev`
4. Run `http://localhost:5000`

#### 💾 Setup Project

If you want replace all strings (example: package name, author, urls, etc...) in markdown file, source files and others files of this project you need edit `setup.json` with correct values and run `npm run setup`.


## 💫 License

-   Code and Contributions have **MIT License**
-   Images and logos have **CC BY-NC 4.0 License**
-   Documentations and Translations have **CC BY 4.0 License**

###### Copyleft (c) 2021 [Patryk Rzucidło](https://ptk.dev) ([@PTKDev](https://twitter.com/ptkdev)) <[support@ptkdev.io](mailto:support@ptkdev.io)>