Thread by @jaredcwhite

Spent a few hours researching @polymer LitElement today. It's been on my todo list for ages.

This is a REVELATION.

It takes *everything* that's great about Web Components, and makes them 10 times better.

Essentially, for most things most of time,

You. Don’t. Need. React. !!!

The hydration story is also *really* interesting. You can ingest plain ol’ HTML markup including data from child nodes or element attributes (even JSON data) from a static site generator…

…and then sprinkle in ALL the interactive bits you need.

This is truly the future.

Performance is outstanding. All the dynamic prop re-renders work exactly as you'd expect, with only the little bits that need to change actually changing—even when passing brand-new array props. This is some *wild* voodoo.

And of course, since at the end of the day a Web Component is a real HTML element in the DOM, you can drop to the console and interact with all the element/component's props and custom methods.

You don't need JSX. Tagged HTML template literals provide all of the code-in-markup functionality you'll ever use with NONE of the shortcomings.

Shadow DOM means CSS is scoped at the browser level, no extra tooling required. None. You can use tagged CSS template literals to construct styles dynamically in JS, or use an external stylesheet + CSS Shadow Parts or CSS Variables for theming.

Create elaborate design systems which are a combination of static HTML via your favorite template language(s)—in my case, Liquid and Markdown—and then add dynamic JS functionality using Web Components + LitElement.

Browser compatibility? Some of it is fine, other pieces are super new (like CSS Shadow Parts), so YMMV. But looking ahead two, three, five years from now, it'll all get ironed out.

I‘m now 100% convinced that the LitElement approach is THE future of static HTML + Javascript UI.