[labs/react] ReactElement base class for making web components from React components

[justinfagnani]

Like the inverse of createComponent(), we should vend a utility to easily wrap React components in web components.

This would likely be a subclass of ReactiveElement that calls ReactDOM.render() with the result of calling this.render(), very much like this PreactElement sketch here: https://stackblitz.com/edit/preact-element?file=preact-element.ts

Component props would be wired in from declared reactive properties. Events and event-like-callbacks could be exposed as properties, or more idiomatically, given callbacks that dispatch real DOM events.

Example

import {MyComponent} from './my-component.js';

@customElement('my-element')
export class MyElement extends ReactElement {
  @property()
  foo: string;

  render() {
    return <MyComponent foo={this.foo} onBar={this._onBar}></MyComponent>;
  }

  private _onBar = (data: BarData) => {
    this.dispatchEvent(new BarEvent(data));
  }
}

class BarEvent extends Event {
  data: BarData;
  constructor(data: BarData) {
    super('bar-event', {bubbles: true, composed: true});
    this.data = data;
  }
}

[jaredcwhite]

I was literally just thinking about this yesterday. After playing around with the very cool support now in React 18 experimental, I wondered "well, if we can stick web components inside of React components now, what about sticking React components inside of web components?!" Glad to see someone pick this up. 😁

[chillenious]

That would be a fantastic feature for us https://github.com/pie-framework/pie-elements; we're looking into adopting Lit for the next major version of our framework, and it would be of great help if we could adapt our existing (React based) components and port these components gradually.

[Michionlion]

Has there been any movement towards integrating this feature (using React components in web components)?