[OPTIONAL]: TodoMVC built with Web Components

[flashdesignory]

This pr is a simple implementation of the todo app using native web-components (with shadow dom)..
This is a "backup" solution in case we want something in the workloads that uses web components extensively.

Notes:

• this uses the proposed updated styles as well and therefore the dom structure itself is somewhat bigger.
• Due to the usage of the shadow doms, I had to find a different way to target the elements in the tests
• DOM structure is different compared to other todo apps
• No build steps used to minify or bundle the app (I could minify the files at some point if need be)

Scores:
Chrome:

Firefox:

Safari:

Edge:

@kara

[bgrins]

I suspect the Lit workload will cover similar technical ground, but we can always compare and contrast profiles.

[flashdesignory]

I suspect the Lit workload will cover similar technical ground, but we can always compare and contrast profiles.

Yup, this is an alternate version to cover web components, in case we don't get the pr in time 😄

[rniwa]

So interesting. With Lit workload (#251), browsers in the order of high score are: Chrome, Firefox, then Safari. With this workload, on the other hand, browsers in the order of high score are Safari, Chrome then Firefox with very little difference between Chrome & Firefox. This might be interesting / different enough workload to merit the inclusion based on that observation.

[julienw]

So interesting. With Lit workload (#251), browsers in the order of high score are: Chrome, Firefox, then Safari. With this workload, on the other hand, browsers in the order of high score are Safari, Chrome then Firefox with very little difference between Chrome & Firefox. This might be interesting / different enough workload to merit the inclusion based on that observation.

There are several questions:

• which workload(s) are more typical of real-world usage?
• what are the performance characteristics of this workloads compared to the lit-based one? Especially do you know why is Safari faring better here than in the other one? This could help us make a decision.

lit is clearly gaining a lot of traction lately (x3 more downloads on npm in a year)
I also know about Stencil which is more stable, but quite used otherwise.
Do you have evidence of developers using web components without a library?

[flashdesignory]

@rniwa @rictic - using constructable styles makes a difference.
The latest push is using them..

Chrome before:

Chrome after:

Safari before:

Safari after:

Firefox before:

Firefox_after:

[julienw]

Thanks for the work, this looks pretty solid! Also it's pretty nice to finally have an example that uses esm without a build step. IMO this may be the biggest interest for this workload.

I added a few comments, I didn't add them everywhere they apply by simplicity but of course they apply in all similar code.

I'm not approving just yet because I'd like to see the code with these changes again. Please add new commits for the changes so that the new review will be easy to do :-)

[julienw]

I wrote in my previous comments that the same comments were applying to other files :-) can you fix those too?

1. document.querySelector("html").getAttribute("dir") => document.dir
2. this.shadow.host => this

In all components

Thanks :)

[flashdesignory]

ah yes 🤦 - thanks!

[julienw]

Thanks for the quick fixes, looks good to me now