sveltejs / Svelte Custom Elements
Licence: mit
Turn Svelte components into web components
Stars: ✭ 45
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Svelte Custom Elements
Markuplint
A Linter for All Markup Languages.
Stars: ✭ 193 (+328.89%)
Mutual labels: webcomponents, svelte
Magic Microservices
Write components in any way, use them everywhere.😘
Stars: ✭ 145 (+222.22%)
Mutual labels: webcomponents, svelte
Vaadin Form Layout
The Web Component providing configurable responsive layout for form elements. Part of the Vaadin components.
Stars: ✭ 15 (-66.67%)
Mutual labels: webcomponents
Svelte 3 Rollup Typescript Vscode
Starter for svelte 3/rollup/typescript/vscode
Stars: ✭ 43 (-4.44%)
Mutual labels: svelte
Sapper Template Firebase
Starter Rollup template for Sapper apps with Firebase functions based on https://github.com/nhristov/sapper-template-rollup.
Stars: ✭ 29 (-35.56%)
Mutual labels: svelte
Svelte Pick A Place
Javascript location picker built with Svelte
Stars: ✭ 44 (-2.22%)
Mutual labels: svelte
Codeparadise
Web based platform for kids to learn to program using Object Oriented principles in Smalltalk
Stars: ✭ 35 (-22.22%)
Mutual labels: webcomponents
Jsx Lite
Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and Liquid.
Stars: ✭ 1,015 (+2155.56%)
Mutual labels: svelte
Omni
Distributed publishing platform and discussion network for scholars. Establishing an unenclosable scholarly commons.
Stars: ✭ 34 (-24.44%)
Mutual labels: svelte
Why Svelte
Why Svelte is our choice for a large web project in 2020
Stars: ✭ 953 (+2017.78%)
Mutual labels: svelte
Reactshadow
🔰 Utilise Shadow DOM in React with all the benefits of style encapsulation.
Stars: ✭ 948 (+2006.67%)
Mutual labels: webcomponents
Masonry Layout
An efficient and fast web component that gives you a beautiful masonry layout
Stars: ✭ 43 (-4.44%)
Mutual labels: webcomponents
Smelte
UI framework with material components built with Svelte and Tailwind CSS
Stars: ✭ 871 (+1835.56%)
Mutual labels: svelte
Svelte Preprocess
A ✨ magical ✨ Svelte preprocessor with sensible defaults and support for: PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript, Pug and much more.
Stars: ✭ 970 (+2055.56%)
Mutual labels: svelte
Lwc
⚡️ LWC - A Blazing Fast, Enterprise-Grade Web Components Foundation
Stars: ✭ 974 (+2064.44%)
Mutual labels: webcomponents
Html Modules Toolkit
Transforming HTML standards of the future into JavaScript standards of the past
Stars: ✭ 45 (+0%)
Mutual labels: webcomponents
This project is deprecated — Svelte can compile directly to custom elements as of version 1.37 (see sveltejs/svelte#797 for more info)
svelte-custom-elements
Register Svelte components as custom elements.
Installation and usage
First, you need to be familiar with Svelte. Read the guide if you haven't already, then come back here!
Install svelte-custom-elements to your project...
npm install -S svelte-custom-elements
...then use it in your app like so:
import Counter from './Counter.html';
import { register } from 'svelte-custom-elements';
register( 'my-component', Counter, [ 'value' ] );
document.body.innerHTML = '<my-component value="42"></my-component>';
The register function takes three arguments:
- The tag name you wish to use
- A Svelte component constructor
- An optional list of 'observed attributes'. Any properties that you want to get or set (i.e.
component.thing = 'foo') must be included in this list.
Demo
Link / Source
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].