cjsaylor/web-components-todo-example

web-components-todo-example

SAME THING IN VueJS:

• https://gist.github.com/kylerberry/493c5339c8aa22fa50c7694cdf7a4d0e

SAME THING IN React:

• https://gist.github.com/cjsaylor/f69a273c8ee9077cd62adecfccaf8dfa

Things I wanted to achieve:

• completely native implementation
• stateless rendering of template
• content-distribution via <slot>API
• shadowRoot encapsulation (scoped styles and hiding implementation)
• unidirectional dataflow, achieved via:
  • using attributes for data communication to children
  • using dispatched events for communication with parents
• provide an example of setters for passing rich data (arrays, objects)

Things that could be optimized:

• batching multiple attribute updates attributeChangedCallback to one render cycle
• attributeMarshalling (syncing attributes to obj properties)

Here are some best practices I followed: https://developers.google.com/web/fundamentals/web-components/best-practices