Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/singhtal/svelte-webcomponents
A ready-to-use project template to build custom elements (web components) with Svelte 3 with support and examples for web components, jest, sass, nested components with props, eslinting, stylelinting, Github actions, propagating custom events from shadow-DOM to real-DOM etc.
https://github.com/singhtal/svelte-webcomponents
custom-elements javascript open-source shadow-dom svelte svelte3 sveltejs web-component web-components
Last synced: 4 months ago
JSON representation
A ready-to-use project template to build custom elements (web components) with Svelte 3 with support and examples for web components, jest, sass, nested components with props, eslinting, stylelinting, Github actions, propagating custom events from shadow-DOM to real-DOM etc.
- Host: GitHub
- URL: https://github.com/singhtal/svelte-webcomponents
- Owner: singhtal
- License: mit
- Created: 2021-05-13T15:00:45.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-10-20T16:37:47.000Z (over 2 years ago)
- Last Synced: 2024-09-29T12:02:40.782Z (4 months ago)
- Topics: custom-elements, javascript, open-source, shadow-dom, svelte, svelte3, sveltejs, web-component, web-components
- Language: JavaScript
- Homepage:
- Size: 290 KB
- Stars: 30
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
svelte-webcomponents
[](https://xenodochial-lumiere-4883d3.netlify.app/)
[](https://github.com/tal1992/svelte-webcomponents) [](https://github.com/tal1992/svelte-webcomponents/blob/main/LICENSE) [](https://svelte.dev/) [](https://www.javascript.com) 
If you’re using web-components or if you like the project, please ★ this repository to show your support! 🤩
The world's most easiest, ready to use template for web-components.
## About 📚
A ready to use project template to build custom elements (web components) with Svelte 3 with support and examples for web components, jest, sass, nested components with props, eslinting, stylelinting, Github actions and custom events from shadow-DOM to real-DOM etc.
## Installation 🚀
Run below command inside the working folder
```bash
$ git clone https://github.com/tal1992/svelte-webcomponents.git
** or **
$ npx degit tal1992/svelte-webcomponents
```
## Installation and build 📌
```bash
📦 $ npm install
🔨 developer mode -> $ npm run dev
🔨 production mode -> $ npm run build
```
## Using web-components in HTML 📌
```html
```
## Using web-components as a widget 📌
```javascript
function addScript(src) {
var s = document.createElement("script");
s.setAttribute("src", src);
document.querySelector("body").appendChild(s);
}
//replace the url with your hosted path of bundle.js
addScript("https://loremipsumdolarsir/build/bundle.js", "", "");
```
Now that your bundle.js file is included in the html , we can use the web components.
```javascript
let foo = document.createElement('component-foo');
let header = document.getElementByTagName('header');
foo.setAttribute('propOne', "lorem");
foo.setAttribute('propTwo', "Ipsum");
// please replace header with the element where you want to add your custom element.
header.parentNode.replaceChild(foo, header);
```
## Nested Custom Elements 📌
#### Register your custom-element inside App.svelte
##### App.svelte
```javascript
import foo from './foo.svelte';
import bar from './bar.svelte';
```
#### No need to import the custom element inside parent declared component, use custom tag names while nesting.
##### Parent.svelte
```svelte
```
## Writing SCSS inside svelte 📌
#### This template comes with in-built support for scss.
##### foo.svelte
```svelte
h2 {
padding: 20px;
}
```
## Test cases 📌
Write test cases inside __tests __ folder
Note : Dont treat webcomponents as a special case for testing, they should be tested as normal svelte components.
```javascript
import { render } from "@testing-library/svelte";
import App from "../src/App.svelte";
describe("App component", () => {
test("should render component correctly", () => {
const { container } = render(App);
expect(container).toContainHTML("
Hello from svelte
");
});
});
```
Use normal component name and not the webcomponent name in the test case.
```bash
$ npm run test
```
## ESLINT 📌
```bash
$ npm run lintjs
```
## Style lint 📌
```bash
$ npm run lintcss
```
### Event propagation from Shadow DOM to Real DOM 📌
Foo.svelte (web component)
```svelte
import { get_current_component } from "svelte/internal";
const thisComponent = get_current_component();
const dispatchEvent = (name, detail) => {
thisComponent.dispatchEvent(new CustomEvent(name, {
detail,
composed: true, // propagate to the Real DOM, handled in index.html
}));
};
function handleClick(event) {
event.preventDefault();
dispatchEvent("customclick", name)
}
handleClick(event)}>Click me
```
Inside Real DOM
```html
window.onload = function () {
let myelem = document.querySelectorAll('component-foo');
myelem.forEach(function (elem) {
elem.addEventListener('customclick', (e) => {
alert(e.detail + ' clicked');
});
});
};
```
## Developer
[Linkedin](https://www.linkedin.com/in/iamtalvinder/)
[Twitter](https://twitter.com/iamtalvinder)
[Email](mailto:[email protected])
## License
[MIT](https://choosealicense.com/licenses/mit/)