Use web components for what they’re good at

• React

  1,813 227,985 10.0 JavaScript

  The library for web and native user interfaces.

  

  > react passes everything as attributes for some reason

  Because that was their design choice: if you write attributes you pass them as attributes to the components

  > I personally don’t understand why this hasn’t been fixed.

  Because React is very popular and it's used everywhere in Facebook. You can't just change the behaviour without breaing a lot of stuff

  > Preact has managed to support properties

  > it would be fairly easy for React as well.

  Yup, they should "just" do it. Meanwhile, here's an overview of what's needed for that support: https://github.com/facebook/react/issues/11347

  Preact uses Option 2 in the list. Other libraries go for either Option 1 or Option 3. React is going with option 2 in an experimental branch.

• SaaSHub

  www.saashub.com featured

  SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

  

• single-spa

  50 13,260 4.8 JavaScript

  The router for easy microfrontends

  

  I’ve actually done that “web components as the interoperability layer”!

  It was this old angular 1.8 app with new features being written in angular-hybrid-ized angular 8. Ripping out angular-hybrid and separating the angular 1.8 routes from the modern angular routes was difficult, but now they were totally separate.

  The only thing linking them together was an object with some RXJS streams in it for state, and a little in-house wrapper “app” who just loaded one component or another depending on the URL and a hash of routes for config. (I’d probably use SingleSPA [1] now. Same thing really.)

  We could deploy them separately since the build just ends up being another JS file somewhere that just gets included with a script tag at runtime. No version bumping! No big mega build!

  We started replacing the remaining “old” routes 1 by 1 with a “new” counter part. That was the easiest part, and went at a pace devs were comfortable with (fast enough) and business folk could tolerate. (modular enough to not HAVE to be done all at once)

  Last I checked, the angular 1.8 stuff is gone years ago. :)

  [1] https://single-spa.js.org/

• shoelace-css

  73 12,721 9.3 TypeScript

  A collection of professionally designed, every day UI components built on Web standards. SHOELACE IS BECOMING WEB AWESOME 👇👇👇

  

  > I see libraries of components/widgets offer versions for React and Vue and other things, never a web component version.

  In this regard, because I don't want to be tied to a JS framework (because most of the time I don't even use one) but I still want to have a cohesive set of UI components, I've been using Shoelace: https://shoelace.style

  You can use it any way you want, with a framework or not, in a SPA or not. It's a bit like using Bootstrap components, except you get much less markup cruft.

  Their own bullet points:

      - Works with all frameworks

• custom-elements-everywhere

  19 1,178 9.1 JavaScript

  Custom Element + Framework Interoperability Tests.

  

  Seems it doesn’t work in React, everything is sent as a string. There was a link in the article that shows how well web components work with various frameworks.

  https://custom-elements-everywhere.com/

  You can see how React fares for itself.

• details-dialog-element

  1 739 7.4 JavaScript

  Discontinued A modal dialog that's opened with <details>.

  

  GitHub is one:

  https://github.com/github/details-dialog-element

  There should be others here:

  https://github.com/web-padawan/awesome-web-components#compon...

• awesome-web-components

  2 2,890 4.6

  A curated list of awesome Web Components resources.

  GitHub is one:

  https://github.com/github/details-dialog-element

  There should be others here:

  https://github.com/web-padawan/awesome-web-components#compon...

• vscode-webview-ui-toolkit

  6 1,995 5.5 TypeScript

  A component library for building webview-based extensions in Visual Studio Code.

  

  Visual Studio Code has a set of web components designed for writing custom extension UIs that fit with the core VSCode UI - https://github.com/microsoft/vscode-webview-ui-toolkit - and explicitly mentions that being usable in multiple frameworks is one of the reasons for choosing web components as an implementation tech.

  It ships React components that act as adaptors for them out of the box.

Suggest a related project