Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sveltejs/svelte-custom-elements
Turn Svelte components into web components
https://github.com/sveltejs/svelte-custom-elements
customelements svelte webcomponents
Last synced: 3 months ago
JSON representation
Turn Svelte components into web components
- Host: GitHub
- URL: https://github.com/sveltejs/svelte-custom-elements
- Owner: sveltejs
- License: mit
- Archived: true
- Created: 2017-03-02T16:17:06.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-09-12T21:04:55.000Z (over 7 years ago)
- Last Synced: 2024-04-13T22:42:34.356Z (8 months ago)
- Topics: customelements, svelte, webcomponents
- Language: JavaScript
- Size: 130 KB
- Stars: 49
- Watchers: 9
- Forks: 7
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# This project is deprecated — Svelte can compile directly to custom elements as of version 1.37 (see [sveltejs/svelte#797](https://github.com/sveltejs/svelte/issues/797) for more info)
---
# svelte-custom-elements
Register Svelte components as custom elements.
## Installation and usage
First, you need to be familiar with [Svelte](https://svelte.technology). Read the [guide](https://svelte.technology/guide) if you haven't already, then come back here!
Install svelte-custom-elements to your project...
```bash
npm install -S svelte-custom-elements
```
...then use it in your app like so:
```js
import Counter from './Counter.html';
import { register } from 'svelte-custom-elements';
register( 'my-component', Counter, [ 'value' ] );
document.body.innerHTML = '';
```
The `register` function takes three arguments:
1. The tag name you wish to use
2. A Svelte component constructor
3. 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](https://svelte-custom-elements.surge.sh/) / [Source](https://github.com/sveltejs/svelte-custom-elements/tree/master/demo)
## License
MIT