How to pass shadowroot ref of parent to child component in react

Question

I am trying to insert a codemirror 6 component inside Ionic react framework's IonContent, but it completely messes with the codemirror styles because of the shadowdom used by IonContent. Codemirror allows us to pass a root property where I can pass the IonContent shadow root, but I am not sure how I can get the ref for the parent IonContent.

const ICRef = useRef<HTMLIonContentElement>(null);
return (
<IonContent ref={ICRef}>
        <CodeMirrorEditor editorRoot={ ICRef.current.shadowRoot }/>
 </IonContent>
)
`

But I get error -

react-dom.development.js:23275 Uncaught TypeError: Cannot read properties of null (reading 'shadowRoot')

It seems like the shadowdom of IonContent is not yet part of the browser dom when CodeMirrorEditor is being rendered. Any pointers would be appreciated. Thanks.

score 1 · Accepted Answer · answered Jan 26 '22 at 18:36

I found a clean solution to my issue. Instead of passing IonContent ref to CodeMirrorEditor to mount codemirror component inside the shadowdom of IonContent, I created a shadowdom for codemirror itself which will keep all codemirror styles self-contained and wont interfere with Ionic’s styles.

How to pass shadowroot ref of parent to child component in react

1 Answers1