javascript – How to do shadow DOM in react js

I need to implement shadow DOM to particular component. This component has one child component and the child component has several component. I required to add shadowDOM style to these all components.

import React from 'react';
import { render } from 'react-dom';
import App from './App';

const host = document.querySelector('#parent-div');
const shadow = host.attachShadow({ mode: 'open' });
const rendered= document.createElement('div');
shadow.appendChild(rendered);
ReactDOM.render(<App />, rendered);


//The above code is rendered and the child components also rendered, But I couldn't see the app component and its child components in visually.