Web components loosen framework coupling

There is quite a momentum about web components which I find alluring, so I will dig through the many articles and share my takes on my blog here.

Today I have read:

Web Components Eliminate JavaScript Framework Lock-in

Jake’s thought that using frameworks in tandem with web components to reduce coupling between resonates a lot with me:

In my current project, I use Sveltekit and for the UI component lib — beside other criteria that I find important like consistent a11y support — I decided for Shoelace which is providing UI elements as web components. I want to have a very loose coupling between UI layout creation and the framework orchestrating the interactivity with them, because

Furthermore, I agree with what Shoelace & FontAwesome folks write about web components:

  • Separates how your components look (UI) from how they work (UX), allowing easy theming now and (more importantly) fast retheming later.
  • Sandboxed styling means you can drop any web component into an existing site, and it won’t break your site.
  • Highly readable markup. You can immediately understand what you’re looking at.
  • Easily create a translation layer to any JS framework we want (Vue, React, Angular, etc.). Write once, and use it everywhere.
  • They’re web standards. Unlike the latest fad, web components will be around for a long time.

To prove his point about tandem, Jake builds an app where every single component is written with a different framework — React, Svelte and Solid — and concludes saying

Web components drastically loosen the coupling of JavaScript frameworks by providing a common interface that all frameworks can use. From a consumer’s point of view, web components are just HTML tags — it doesn’t matter what goes on “under the hood”.

Great article, also check out his reading list at the end.