Use web components for what they’re good at

• React

  1,694 221,803 9.9 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.

• single-spa

  48 13,036 6.1 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/

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• shoelace-css

  73 11,962 9.6 TypeScript

  A collection of professionally designed, every day UI components built on Web standards. SHOELACE IS BECOMING WEB AWESOME. WE ARE LIVE ON KICKSTARTER! 👇👇👇

  

> 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,135 8.9 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,646 4.9

  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,892 6.9 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.

• WorkOS

  workos.com sponsored

  The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  

Suggest a related project