How to get the child element inside Angular ShadowRoot?

In Angular 18 application, I am trying to load some mermaid content inside a under the ShadowRoot.

The parent component has encapsulation: ViewEncapsulation.ShadowDom,

I am using the below versions

"marked": "^12.0.2",
"marked-code-preview": "^1.3.7",
"mermaid": "^11.4.1",


HTML

<markdown lineNumbers [data]="responseText" mermaid></markdown>


TS

responseText = "Sample Flow Diagram:\nmermaid\ngraph LR\n A[Stage 1] --> B[Stage 2]\n B --> C[Stage 3]\n B --> D[Stage 4]\n D --> E[Stage 5]\n D --> F[Stage 6]\n D --> G[Stage 7]\n D --> H[Stage 8]\n\n\nThe diagram shows how the process flow:\n\n1. Stage 1 of the process.\n 2. Stage 2 of the process.\n3. Stage 3 of the process.\n4. Stage 4 of the process."

Here text is rendered as expected but mermaid content is showing as blank.



Looks mermaid couldn't find the element to render the content at runtime



Tried to below option also

public ngAfterViewInit(): void {
mermaid.initialize({ startOnLoad: false });
}


Still not working

Continue reading...