Use Shadow DOM in react project

Question

I'm building a widget.

My widget is behaving differently on each sites, as parent website CSS is affecting widget elements.

So I'm planning to move everything to shadow DOM. But havn't worked with Shadow DOM nor my frontend skills are that good. So would appreciate your help.

My App.tsx looks like this

export const App = ({ element, ...appSettings }: Props) => <Main />;

Main file looks like this.

Style.root position the widget on specific places like top-middle or bottom middle.

 return (
        <div>
            <div className=${style.root}>
                <div>
                    <div
                        className={style.container}
                    >
                        <WidgetTypes
                          data={data}
                        />
                    </div>
                </div>
            </div>:

WidgetType component looks like this

if(type=small)
return <WidgetSmall>

if(type=large)
return <WidgetLarge>

Since this is a widget. I want to move the entire react app into Shadow DOM.I have tried moving the app like this but not working

const hostContainer = document.getElementById('rootouter');

hostContainer?.attachShadow({mode:"open"}).append(...hostContainer.childNodes)

type Props = Configurations;
export const App = ({ element, ...appSettings }: Props) => <Main id="rootouter" />;