Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

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)