lit-state VS web-components-examples

The reason React uses a virtual DOM is because when React started, there were no (advanced) HTML templates yet. And it made it easy to setup listeners on elements, instead of manually adding it with `addEventListener()` and possibly remove them again with `removeEventListener()`. So the virtual DOM was really a game changer.

But Lit templates solve this problems in a more browser integrated way, without the need of a virtual DOM. How you manage the state is free to your choice, that is also not something exclusive to React and your favorite pattern can also be used with Lit. I wrote a tiny state management library (LitState [0]) which makes it very easy for multiple components to share the same state and stay in sync. I personally find it much more convenient and cleaner than any other state library I've used before. And it integrates very nicely with Lit.

[0]: https://github.com/gitaarik/lit-state

I was excited for web components, but the API was lacking (the final tipping point that led me to build Joystick [1]). I just couldn't get on board with a web-standard that eschewed HTML in favor of stuff like this [2] where list items are attributes. The hyphenated namespace thing has always made my eye twitch, too (silly, I know).

[1] https://github.com/cheatcode/joystick

[2] https://github.com/mdn/web-components-examples/blob/main/edi...

I just found out about Web Components and read that they can be used complementary with React. This concept of Web Components are new to me as I thought only library/frameworks were used to create re-usable component. I'm just wondering how are Web Components used in modern frontend development and if there are any examples that I can refer to such as github or codepen where Web Components are used within React. So far I found this example from MDN: https://github.com/mdn/web-components-examples

Second, you’ll just import the JavaScript file where you’ve defined your web components into each html file. Example.