Click event not firing when React Component in a Shadow DOM
<p>I have a special case where I need to encapsulate a React Component with a Web Component.  The setup seems very straight forward.  Here is the React Code:</p>

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

        {this.props.label} &lt;br /&gt; CLICK ME

      &lt;/div&gt;
    );
  }
};

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

<p>HTML:</p>

<pre><code>&lt;div id="mountReact"&gt;&lt;/div&gt;
</code></pre>

<p>This mounts fine and the click event works.  Now when I created a Web Component wrapper around the React Component, it renders correctly but the click event doesn't work.  Here is my Web Component Wrapper:</p>

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

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

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

<p>And here is the HTML:</p>

<pre><code>&lt;box-webcomp&gt;&lt;/box-webcomp&gt;
</code></pre>

<p>Is there something I'm missing?  Or does React refuse to work inside a Web Component?  I have seen a library like Maple.JS which does this sort of thing, but their library works.  I feel like I'm missing one small thing.</p>

<p>Here is the CodePen so you can see the problem:</p>

<p><a href="http://codepen.io/homeslicesolutions/pen/jrrpLP" rel="noreferrer">http://codepen.io/homeslicesolutions/pen/jrrpLP</a></p>