Gatsby: Using Webcomponents (e.g. lit-element) instead of react

[raptoni]

Would it be possible to use gatsby with webcomponents (lit-element) instead of react ?

[wardpeet]

you won't be able to entirely remove React as we use parts of it to do routing and other optimisations.

You can use gatsby and webcomponents together. React supports it so we do too 😄
https://reactjs.org/docs/web-components.html

There are probably better articles on the web

[raptoni]

I did not expect to just remove react and substitute it with lit-element. The question was if that is something worth considering as a future feature. I am fairly new to this but as far as I understand using a native standard would be a great fit for gatsby even if react is a the "standard" nowadays. I am sure routing is something you could do without react-router.

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!

[neilhem]

You can use React as Container components and for routing combined with your ui components based in web components

[ZaradarDFDS]

You can use lit-element and React together as long as you have support for CustomElements. Essentially you just use the CustomElement in your react application/plugin and lit-element will take care of the rest. there are some issues with synthetic events you need to be aware of and if you want to keep react in sync with lit-elements you will probably need to look at the React Hooks API

You can find a working sample reference here @ https://github.com/dfds/backstage/blob/dfds-web-api/plugins/dfds-web-api/src/components/DfdsWebApiComponentWrapper/DfdsWebApiComponentWrapper.tsx