У меня есть особый случай, когда мне нужно инкапсулировать компонент React с веб-компонентом. Настройка кажется очень простой. Вот код реакции:

// 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>

Это монтируется нормально, и событие нажатия работает. Теперь, когда я создал оболочку веб-компонента вокруг компонента React, он отображается правильно, но событие click не работает. Вот мой упаковщик веб-компонентов:

// 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
});

А вот и HTML:

<box-webcomp></box-webcomp>

Я что-то упускаю? Или React отказывается работать внутри веб-компонента? Я видел библиотеку вроде Maple.JS, которая делает подобные вещи, но их библиотека работает. Я чувствую, что мне не хватает одной маленькой вещи.

Вот CodePen, чтобы вы могли увидеть проблему:

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