Tengo un caso especial en el que necesito encapsular un componente React con un componente web. La configuración parece muy sencilla. Aquí está el código de reacción:

// React Component
class Box extends React.Component {
  handleClick() {
    alert("Click Works");
  }
  render() {
    return (
      <div 
        style={{background:'red', margin: 10, width: 200, cursor: 'pointer'}} 
        onClick={e => this.handleClick(e)}>

        {this.props.label} <br /> CLICK ME

      </div>
    );
  }
};

// Render React directly
ReactDOM.render(
  <Box label="React Direct" />,
  document.getElementById('mountReact')
);

HTML:

<div id="mountReact"></div>

Esto se monta bien y el evento de clic funciona. Ahora, cuando creé un contenedor de componentes web alrededor del componente React, se procesa correctamente pero el evento click no funciona. Aquí está mi contenedor de componentes web:

// Web Component Wrapper
class BoxWebComponentWrapper extends HTMLElement {
  createdCallback() {
    this.el      = this.createShadowRoot();
    this.mountEl = document.createElement('div');
    this.el.appendChild(this.mountEl);

    document.onreadystatechange = () => {
      if (document.readyState === "complete") {
        ReactDOM.render(
          <Box label="Web Comp" />,
          this.mountEl
        );
      }
    };
  }
}

// Register Web Component
document.registerElement('box-webcomp', {
  prototype: BoxWebComponentWrapper.prototype
});

Y aquí está el HTML:

<box-webcomp></box-webcomp>

¿Se me escapa algo? ¿O React se niega a trabajar dentro de un componente web? He visto una biblioteca como Maple.JS que hace este tipo de cosas, pero su biblioteca funciona. Siento que me falta una pequeña cosa.

Aquí está el CodePen para que pueda ver el problema:

http://codepen.io/homeslicesolutions/pen/jrrpLP