Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shprink/web-components-todo
A simple todo list built with various Web Components technologies
https://github.com/shprink/web-components-todo
polymer stenciljs web-components
Last synced: about 1 month ago
JSON representation
A simple todo list built with various Web Components technologies
- Host: GitHub
- URL: https://github.com/shprink/web-components-todo
- Owner: shprink
- License: mit
- Created: 2018-01-06T14:13:13.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-13T23:11:56.000Z (almost 2 years ago)
- Last Synced: 2024-10-01T02:41:37.203Z (about 1 month ago)
- Topics: polymer, stenciljs, web-components
- Language: JavaScript
- Homepage: https://wc-todo.firebaseapp.com
- Size: 4.14 MB
- Stars: 410
- Watchers: 19
- Forks: 64
- Open Issues: 149
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# web-components-todo
Comparison on how to update DOM, pass attributes/properties and dispatch/listen to events with Web Components
![todo](https://user-images.githubusercontent.com/1388706/36195203-098d39ea-116d-11e8-8573-5c19cab826e0.gif)
## Demos
* [Native Web Component](https://wc-todo.firebaseapp.com/native)
* [Lit-Element](https://wc-todo.firebaseapp.com/lit-element-2.1/)
* [Stencil](https://wc-todo.firebaseapp.com/stencil-0.16/)
* [Slim.js](https://wc-todo.firebaseapp.com/slimjs)
* [SkateJS + Lit-Html](https://wc-todo.firebaseapp.com/skatejs-lit-html)
* [SkateJS + Preact](https://wc-todo.firebaseapp.com/skatejs-preact)
* [Svelte](https://wc-todo.firebaseapp.com/svelte/)
* [Solid](https://wc-todo.firebaseapp.com/solid/)
* [Functional-element](https://wc-todo.firebaseapp.com/functional-element/)
* [Angular Elements](https://wc-todo.firebaseapp.com/angular-elements)
* [Vue Web Component Wrapper](https://wc-todo.firebaseapp.com/vue)
* [Polymer 2](https://wc-todo.firebaseapp.com/polymer2)
* [Polymer 3](https://wc-todo.firebaseapp.com/polymer3)## syntax differences
![stencil_vs_wc](https://user-images.githubusercontent.com/1084459/45477634-a6480200-b74a-11e8-8b57-c96026896c89.png)