panel VS web-components-examples

Webcomponents will outlive React 13, mostly likely. Will they outlive React entirely or its cousins like Solid and Svelte? Perhaps not.

Webcomponents and React look like they solve the same problem but they do not.

Webcomponent api is pretty shallow. You get connected/disconnnected/attributeChanged call back but gotta write your own property setter and getters, and that’s mostly it. Shadow dom becomes a pain to work with if something needs to pierce it. Can’t pass nested objects in attributes, gotta encode as string.

Mixpanel went all in on webcomponents, but had to build a whole bunch of lib tooling around it. They made their own framework on top of webcomponents. https://github.com/mixpanel/panel

Worked on panel lib and webcomponent UI for many years. It is not a silver bullet.

The issue with webcomponents is there are a ton of libraries that fill in the missing gaps. There’s not a lot you can do with pure vanilla webcomponent api since browsers don’t provide efficient dom updating mechanism. Google has their own thing, Microsoft had multiple internal libs across orgs, Reddit does their own thing.

The most standard thing for frontend with wide adoption right now is React.

So the way I see it, is that React has already outlived webcomponents.

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.