shprink/web-components-todo

A simple todo list built with various Web Components technologies

web-components-todo

Comparison on how to update DOM, pass attributes/properties and dispatch/listen to events with Web Components

Demos

• Native Web Component
• Lit-Element
• Stencil
• Slim.js
• SkateJS + Lit-Html
• SkateJS + Preact
• Svelte
• Solid
• Functional-element
• Angular Elements
• Vue Web Component Wrapper
• Polymer 2
• Polymer 3

syntax differences

web-components-todo's Issues

(native) initial todo item incorrectly rendered

When you first display the native demo, the second todo item is not checked, so it is supposed to be incomplete. However, when you mark the first one as complete, the second one is marked completed as well when the component is refreshed.

Likewise, if we start by marking the second item completed, it seems it does not have any effect the first time we click.

The culprit seems to be the line this._checked = false; in TodoItem constructor.

Shouldn't it be this._checked = this.checked; ?

Update visual comparison

First of all thanks for the repo. It's nice to see how these different custom elements solutions compare. I especially find the visual syntax comparison interesting. I noticed that recent additions such as lit-element aren't a part of it.

I'm open to doing a PR with new screenshots, but It won't be the same style/color-highlighting as yours.

(stencil) inconsistent checkbox look

In the StencilJS demo, the checkboxes style needs additional styling.

Tested in:

• Chrome 64.0.3282.186 (Official build) (64 bits)
• Safari 11.0.3 (13604.5.6)

Tested:

Expected:

Problem running web components todo in Stencil

Hi Julien, I just try web components todo in Stencil via local and install dependencies. When I run npm run dev the folder www overwrite by Stencil like picture below

and in my terminal shows error as attached.

AFAIK, the folder www is ignore by Stencil so when we run npm run dev or npm run start it will generate a folder www with it’s assets. Can I know the reason why you don't ignore this folder? Could you please advice what should I do to solve the problem? Thanks a lot.

Add hybrids example

https://hybrids.js.org

Polymer 3 Example unchecks last item when previous item is deleted

Problem when running Vue TODO in local

Hi Julien, thanks for update web components todo in vue framework. I just test it in local then run npm run start but, it shows empty. Here's is the picture + console.

When I test in dist folder after running npm run build:wc && npm run build it works well.

Typo in image

Just to be picky ... never heard of StakeJS ;)

Suggestion or pull request

Would you take a suggestion or pull request for an implementation? I just started working on this, but I've got functional custom elements working pretty well: https://github.com/lastmjs/functional-element