Javascript无法在渲染为阴影dom的React组件中运行

Question

我正在尝试将React应用程序/组件渲染到影子dom中，因为该网站不是水疗中心，我正在关注：https://medium.com/rate-engineering/winning-the-war-of-css-conflicts-through-the-shadow-dom-de6c797b5cba。

Css正在渲染到影子dom中，但是所有Javascript都包含在捆绑包中，并且似乎没有在影子dom内的控制器上绑定正确的事件。在下面的示例中，呈现了下拉菜单，但单击它却没有任何东西。

mycomponent.js

import './createShadowRoot';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Dropdown from 'react-dropdown';
import 'react-dropdown/style.css'

const options = [
    { value: '1', label: '1 person' },
    { value: '2', label: '2 persons' },
    { value: '3', label: '3 persons' },
];

class MyComponent extends Component {

    render() {
        return (
            <div>
                <Dropdown options={options} />
            </div>
        );
    }
}

const shadowRoot = document.getElementById('root').shadowRoot;
const reactRoot = document.createElement('div');
reactRoot.setAttribute('id', 'react-root');
shadowRoot.appendChild(reactRoot);
ReactDOM.render(<MyComponent />, reactRoot);

createShadowRoot.js

const shadowHost = document.getElementById('root');
shadowHost.attachShadow({ mode: 'open' });