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.

Overview
svelte logo

svelte-webcomponents

Website v1.0.0 License: MIT Powered By Svelte Language: Javascript Tweet

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

$ git clone https://github.com/tal1992/svelte-webcomponents.git
** or **
$ npx degit tal1992/svelte-webcomponents

Installation and build πŸ“Œ

πŸ“¦ $ npm install 

πŸ”¨ developer mode -> $ npm run dev
πŸ”¨  production mode -> $ npm run build

Using web-components in HTML πŸ“Œ

  <component-name propOne="Lorem" propTwo="Ipsum"></component-name>

Using web-components as a widget πŸ“Œ

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.

      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
 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:options tag="component-parent"></svelte:options>

<div class="parent">
    <component-foo name="John" background="orange"></component-foo>
    <component-bar name="Doe" background="lightgreen"></component-bar>
</div>

Writing SCSS inside svelte πŸ“Œ

This template comes with in-built support for scss.

foo.svelte
<style lang="scss">
    h2 {
        padding: 20px;
    }
</style>

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.

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("<body><div><h1>Hello from svelte</h1></div></body>");
  });
});

Use normal component name and not the webcomponent name in the test case.

$ npm run test

ESLINT πŸ“Œ

$ npm run lintjs

Style lint πŸ“Œ

$ npm run lintcss

Event propagation from Shadow DOM to Real DOM πŸ“Œ

Foo.svelte (web component)

<script>
    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)
    }    
</script>

<svelte:options tag="component-foo"></svelte:options>

<button on:click={event => handleClick(event)}>Click me</button>

Inside Real DOM

<script>
	window.onload = function () {
	  let myelem = document.querySelectorAll('component-foo');

	  myelem.forEach(function (elem) {
	    elem.addEventListener('customclick', (e) => {
	      alert(e.detail + ' clicked');
	    });
	  });
	};
</script>

Developer

Linkedin Twitter Email

License

MIT

You might also like...

Frontend framework for creating reactive UIs using direct DOM manipulation. (WIP)

Cosmos Framework A frontend framework for creating reactive UIs using direct DOM manipulation. (Heavily WIP) How to get started with Cosmos Framework

Nov 6, 2022

Race TV Multiplayer is an open source F1TV desktop client for Windows with support for multi-monitor setups

Race TV Multiplayer Race TV Multiplayer is an open source F1TV desktop client for Windows with support for multi-monitor setups. This app is unofficia

Jul 27, 2022

Boilerplate starter template for a new Telegram Web App (TWA) interacting with the TON blockchain

Boilerplate starter template for a new Telegram Web App (TWA) interacting with the TON blockchain

TON Starter Template - Telegram Web App (TWA) Starter template for a new TWA interacting with the TON blockchain Overview This project is part of a se

Dec 17, 2022

A Web Component compiler for building fast, reusable UI components and static site generated Progressive Web Apps

A Web Component compiler for building fast, reusable UI components and static site generated Progressive Web Apps

Stencil: A Compiler for Web Components and PWAs npm init stencil Stencil is a simple compiler for generating Web Components and static site generated

Jan 4, 2023

πŸ™Œ Check if a Discord user is sponsoring you/someone on GitHub and give them roles!

Discord: Is User Sponsor? A bot that gives roles if a user is supporting you on GitHub! Uses Discord OAuth and Discord GitHub integration to get user'

Jun 27, 2022

Write you own GitHub webhooks with Deno Deploy.

Hooray Write you own GitHub webhooks with Deno Deploy. Deno Deploy is where you can distribute your JavaScript/TypeScript code to the edge with one li

Jun 22, 2022

Yet Another JSX using tagged template

Yet Another JSX using tagged template

μš°μ•„ν•œ JSX Yet Another Simple JSX using tagged template μ–Έμ–΄μ˜ ν•œκ³„κ°€ 곧 μ„Έκ³„μ˜ ν•œκ³„λ‹€ - Ludwig Wittgenstein μš°μ•„ν•œ JSXκ°€ μΊ νΌλ“€μ˜ ν‘œν˜„μ˜ 자유λ₯Ό λ„“νžˆκ³  세계λ₯Ό λ„“νžˆλŠ”λ° 도움이 λ˜μ—ˆμœΌλ©΄ ν•©λ‹ˆλ‹€ Example i

Sep 22, 2022

🌲The perfect personal website template.

Conifer 🌲 Conifer is an easy to use, fun and rewarding template to help you build your own personal website. It is 100% free to use- and aimed at tho

Nov 27, 2022

The simplest way to create web components from plain objects and pure functions! πŸ’―

πŸ… One of the four nominated projects to the "Breakthrough of the year" category of Open Source Award in 2019 hybrids is a UI library for creating web

Dec 27, 2022
Releases(1.0.0)
Owner
Talvinder Singh
Open source enthusiast
Talvinder Singh
Custom Elements Manifest is a file format that describes custom elements in your project.

@custom-elements-manifest Custom Elements Manifest is a file format that describes custom elements. This format will allow tooling and IDEs to give ri

open-wc 131 Dec 15, 2022
OpenUI5 lets you build enterprise-ready web applications, responsive to all devices, running on almost any browser of your choice.

OpenUI5. Build Once. Run on any device. What is it? OpenUI5 lets you build enterprise-ready web applications, responsive to all devices, running on al

SAP 2.7k Dec 31, 2022
πŸ““ The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Storybook 75.9k Jan 9, 2023
Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and more.

Write components once, run everywhere. Compiles to: At a glance Mitosis is inspired by many modern frameworks. You'll see components look like React c

Builder.io 7.7k Jan 1, 2023
Give your JS App some Backbone with Models, Views, Collections, and Events

____ __ __ /\ _`\ /\ \ /\ \ __ \ \ \ \ \ __ ___\ \ \/'\\ \ \_

Jeremy Ashkenas 28k Jan 9, 2023
Frontend compiler, inspired by Svelte

Malina.js Malina.js builds your web-application to use it without framework on frontend side. Therefore your web-app becomes thinner and faster, and t

Malina.js 1.1k Dec 29, 2022
🍼 650B Virtual DOM - Use reactive JSX with minimal overhead

?? little-vdom Forked from developit's little-vdom gist. npm: npm i @luwes/little-vdom cdn: unpkg.com/@luwes/little-vdom 650B Virtual DOM Components S

wesley luyten 87 Nov 12, 2022
βš›οΈ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.

Fast 3kB alternative to React with the same modern API. All the power of Virtual DOM components, without the overhead: Familiar React API & patterns:

Preact 33.6k Jan 8, 2023
A compiler that converts React-compatible codes to VanillaJS with no Virtual DOM

Vidact Vidact compiles your React source codes to VanillaJS code with No Virtual DOM ℒ️ . It is similar to Svelte, but unlike Svelte, Vidact does not

Mohamad Mohebifar 753 Dec 22, 2022
Next-generation DOM manipulation

Ractive.js - Next-generation DOM manipulation Have any questions or just want to chat? Join us on GitHub Discussions! What is Ractive.js? It's a JavaS

Ractive.js 5.9k Jan 3, 2023