Lit

Lit is a library to write web components which are similar to a browser-based version of React.

Usage

Events

With Lit, data flows down DOM elements and events flow up DOM elements. This is unlike React where callback handlers are use to pass data up the DOM tree.

1. Create a new event name or event class.
2. In the parent element, use this.addEventListener in the constructor to set the callback for the event.
3. In the child class, call this.dispatchEvent.

React interop

See https://lit.dev/docs/frameworks/react/ for how to use lit components within React components.

There's no simple way to use React inside a webcomponent. You will need to wrap it inside a webcomponent. See https://stackoverflow.com/questions/66970860/creating-pure-web-component-from-react-components and https://github.com/bitovi/react-to-web-component