IonContent shadowdom messing with codemirror 6 custom component styles

I am trying to insert a codemirror 6 component inside 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.

<IonContent>
        <CodeMirrorEditor editorRoot={ // pass parent IonContent's shadowRoot ?? }/>
 </IonContent>

Any ideas how I can deal this this issue? thanks.

EDIT:
I tried using ref and passing it to CodeMirrorEditor like this -

 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’)

Just wanted to check if anyone can help me here. Thanks.

Hi there! Do you have a sample/demo I could look at? It’s kind of hard to help without one.

Hi mhartington@,

Thanks for your response. 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.
Hope this helps anyone else with similar issue.

1 Like