Using Web Components with React just got better!

Until now using a Web Component from within a react application was a bit hit and miss. There were issues with handling event and passing certain properties that are now resolved in the latest experimental release of React. All going well we'll see these updates in the v18 release once it goes live but for now we can show how this improves the use of Web Components in React using the experimental v18 release.

In this demo we create a Lit Element web component and place it into a simple react application and then fire and event from the web component and look to handle it in the react application. This fails using the existing v17 release of React but once we upgrade to v18experimental the event is happily handled in the correct manner.

This is another step towards web components being able to be used in all scenarios, SSR the next hurdle I think...

0:55 Setup
1:15 React Setup
4:05 Lit Setup
10:45 Existing issue with handling events
11:45 Setup React vNext v18 Experimental
14:20 Working React events with Web Component

[AgentZeroNine]

Should be great for Web Components exposure. Hopefully more people realize how unnecessary React actually is.

Also, I'm always taken aback whenever I Windows CMD. I always forget that not all Windows based web devs have moved over to WSL2 + Microsoft Terminal.

[aleja]

The experimental feature for giving more support to web components was not included in the v18 release :/

[raj.blazers]

Will this work for functional components too?

[dominik]

you go through a lot of stuff, but you explain nothing. Is your intention to just have us watch you code? I was expecting an outline of:
1. what a web component is
2. what lit is
3. what you intend for the code to do (outline)
4. components of the code: what files are needed, etc.
You should also have kept it simple - typescript isn't needed at all here, you've just limited your audience to those who know typescript.
As you are coding, you are just piling stuff on, without any explanation as to what the point of it is.

[Oswee]

What is this thing you call "react"? :)