Can I use Atlaskit components inside a shadow root?

Jira Development Jira Cloud
,
1

I’m using a JavaScript custom element:

customElements.define("my-select", MySelect);

…and in the connectedCallback() function, I attach a shadow root:

connectedCallback() {
    this.mountPoint = document.createElement('span');
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.appendChild(this.mountPoint);

    ReactDOM.render(
        <AsyncSelect
            inputId="async-select-example"
            cacheOptions
            defaultOptions
            loadOptions={promiseOptions}
        />,
        this.mountPoint
    );
    retargetEvents(shadowRoot);
}

I find that the styling of the AtlasKit component, AsyncSelect in this case, isn’t applied because the AsyncSelect are attached to the document head rather than in the shadow.

Is there any way around this? Can I get the AtlasKit component styles applied to the AtlasKit component that I create inside my custom element?