React App into Web Component (proof of concept)

Greet.jsx

import * as React from 'react';
import toWebComponent from './WebComponent';

const styles = {
  greeting: {
    color: 'green',
  },
  user: {
    color: 'blue',
  }
};

const Greet = ({
  user,
  greeting,
  attrs,
}) => (
  <div>
    <h1 style={styles.greeting}>{greeting}</h1>
    <h3 style={styles.user}>{user}</h3>
    <ul>
      {attrs
        ? attrs.map(attr => <li key={attr.name}>{attr.name + ': ' + attr.value}</li>)
        : null
      }
    </ul>
  </div>
);

export default toWebComponent(Greet, 'greet-react');

toWebComponent.js

import * as React from 'react';
import ReactDOM from 'react-dom';

const toWebComponent = (Component, name) => {

  class WebComponent extends HTMLElement {

    constructor(...args) {
      super(...args);
      this.mountPoint = document.createElement('span');
    }

    get props() {
      return this._props;
    }

    set props(props) {
      if (this._isRendered) {
        this._props = props;
        this.update();
      } else {
        this._props = props;
      }
    }

    connectedCallback() {
      this.attachShadow({mode: 'open'}).appendChild(this.mountPoint);
      ReactDOM.render(
        <Component {...this.props}  />,
        this.mountPoint,
      );
      this._isRendered = 1;
    }

    update() {
      ReactDOM.unmountComponentAtNode(this.mountPoint);
      ReactDOM.render(<Component {...this.props} />, this.mountPoint);
    }
  }

  customElements.define(name, WebComponent);

  return (props, mountPoint) => {
    const component = document.createElement(name);
    if (props) component.props = props;
    if (mountPoint) mountPoint.appendChild(component);
    return component;
  }
};

export default toWebComponent;

usage.js

import Greet from './Greet';

const mountPoint = document.getElementById("greet-user");
const greetProps = {
  user: 'Will', greeting: 'Hello Good Sir!', attrs: [
    {name: 'height', value: '6 feet'},
    {name: 'hair', value: 'blond'},
    {name: 'weight', value: 'HEY EASY BUDDY!'},
  ],
};

// const greetUser = Greet();
// greetUser.props = greetProps;
// mountPoint.appendChild(greetUser);
// -- or --
Greet(greetProps, mountPoint);