Событие Click не срабатывает, когда React Component в Shadow DOM
У меня есть особый случай, когда мне нужно инкапсулировать компонент 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, чтобы вы могли увидеть проблему: