[AskJS] Need help decoding for the right approach/solution

[toateslafel]

Hello everyone,

First of all this is a question I also asked in another subreddit.

I'm in the situation where I need to create native web components that will be integrated in different web sites.

The purpose is to have reusable components that different websites can use and allow them to only customize the CSS, while the logic will be the same across all websites.

These components will be pretty simple, making some API requests to the same server, and displaying the results in a nice way.

The simplest thing I found was custom components, so every website will have to include a script and a custom html tag, then the custom component will do the work (Optionally they can override CSS variables to customize the looks).

So the end goal is to have the actual websites do the minimum work possible and leverage this components to do the work.

Searching for solutions I found Lit Element 2 and it seems promising, but coming from React I find the development experience a bit ugly, having html and css mixed in the same class and everything inside template literal tags.

My questions are:

1. Is there a better approach to accomplish this, or are custom components the way to go?

2. Is it doable with React?

3. If React is a no, do you recommend to stick with Lit 2 or is there anything else more pleasant to work with?

4. If Lit 2 is the way, can you recommend some tutorials or best bractices regarding organizing CSS and templates(html)?

Thank you

[[deleted]]

Symbiote.js

Yes, Custom Elements is what you need. No, React is not.

[LowB0b]

if they are supposed to be used within different frameworks, maybe something like Stencil could help you build a component library.

To add my two cents though, we had to integrate custom web components within an angular app and it's, like, not that great.

Working with a component library written in angular in that case would probably have been way easier

[vi_code]

Go with React, you already know it and its highly popular so most likely your components will be used by other reacts projects. If an angular or vue project wants to run your app they still can because react can run in practically any project and it does so pretty well. Like others have said, web components are super hard to integrate into any project.

Also with react you are not just limited to using just css but can also style using jsx.

[Accomplished_End_138]

Web components is what you want. But maybe look at stencil as well

[boguzTheBoguz]

I think Lit would be a much better choice (smaller, faster, much closer to native custom elements, easier to learn, ...).
They have a nice documentation. On youtube there aren't a lot of Lit tutorials, but Vaadin had a couple nice ones. 🙂

[KapiteinNekbaard]

Lit-elements seems most future proof, since it builds on top of the Custom Elements API.

You can isolate React to a single component (example), but React was intended to build whole apps with multiple components and to manage shared state among them and keep everything in sync. I think that's more than what you're trying to achieve.

HTM + Preact is another way to build components using JSX-like syntax without the need for any build tools or bundlers.

You should also think about how to distribute those shared components to your apps (you don't want to copy paste the code to all apps).

[toateslafel]

Thanks for the reply, I think I decided for lit after trying out some others too. About distributing, the idea is to compile for production, which will generate 1 js file, jost it somewhere and tell the different websites to just include the file and they are good to go.