Error when using shadow dom

[MyPrototypeWhat]

Description

  <div ref={hostRef}>
      {createPortal(
        <div className="mermaid">{children}</div>,
        shadowRoot // shadow root
      )}
    </div>

children for example:

graph LR
    %% 客户端层
    A[客户端] --> B(负载均衡)
    
    %% 服务层
    subgraph 服务集群
        B --> C[API Gateway]
        C --> D[认证服务]
        C --> E[订单服务]
        C --> F[支付服务]
        C --> G[库存服务]
    end
    
    %% 数据层
    subgraph 数据存储
        D --> H[(用户数据库)]
        E --> I[(订单数据库)]
        F --> J[(交易数据库)]
        G --> K[(库存数据库)]
        L[Redis缓存]
        M[Elasticsearch]
    end
    
    %% 基础设施
    subgraph 基础设施
        N[消息队列]
        O[文件存储]
        P[监控系统]
    end
    
    %% 第三方服务
    Q((短信服务)) -.-> F
    R((支付网关)) -.-> F
    S((物流系统)) -.-> G
    
    %% 连接关系
    C --> L
    C --> N
    C --> O
    D --> M
    P -->|监控| 服务集群
    P -->|监控| 数据存储

Error:

TypeError: Cannot read properties of null (reading 'getBoundingClientRect')
    at addHtmlSpan (http://localhost:5173/@fs/Users/lizhixuan/Desktop/testSpace/cherry-studio/node_modules/.vite/deps/chunk-3SNNQANI.js?v=64e69413:2493:24)
    at createText (http://localhost:5173/@fs/Users/lizhixuan/Desktop/testSpace/cherry-studio/node_modules/.vite/deps/chunk-3SNNQANI.js?v=64e69413:2602:30)
    at labelHelper (http://localhost:5173/@fs/Users/lizhixuan/Desktop/testSpace/cherry-studio/node_modules/.vite/deps/chunk-PZ4OH5SR.js?v=64e69413:1056:23)
    at cylinder (http://localhost:5173/@fs/Users/lizhixuan/Desktop/testSpace/cherry-studio/node_modules/.vite/deps/chunk-PZ4OH5SR.js?v=64e69413:2414:43)
    at insertNode (http://localhost:5173/@fs/Users/lizhixuan/Desktop/testSpace/cherry-studio/node_modules/.vite/deps/chunk-PZ4OH5SR.js?v=64e69413:5565:16)
    at http://localhost:5173/@fs/Users/lizhixuan/Desktop/testSpace/cherry-studio/node_modules/.vite/deps/dagre-4EVJKHTY-4YIWOWO4.js?v=64e69413:519:17
    at Array.map (<anonymous>)
    at recursiveRender (http://localhost:5173/@fs/Users/lizhixuan/Desktop/testSpace/cherry-studio/node_modules/.vite/deps/dagre-4EVJKHTY-4YIWOWO4.js?v=64e69413:454:19)
    at Module.render (http://localhost:5173/@fs/Users/lizhixuan/Desktop/testSpace/cherry-studio/node_modules/.vite/deps/dagre-4EVJKHTY-4YIWOWO4.js?v=64e69413:727:9)
    at render (http://localhost:5173/@fs/Users/lizhixuan/Desktop/testSpace/cherry-studio/node_modules/.vite/deps/chunk-A67C2WIU.js?v=64e69413:57:25)

Steps to reproduce

In the react project

 useEffect(() => {
    setTimeout(() => {
if (shadowRoot?.querySelectorAll('.mermaid')?.length) {
      console.log('🚀 ~ renderMermaid ~ querySelectorAll:', shadowRoot?.querySelectorAll('.mermaid'))
     mermaid.run({
        nodes: shadowRoot.querySelectorAll('.mermaid')
      })
    }
    }, 1000)
  }, [shadowRoot])

Screenshots

No response

Code Sample

Setup

• Mermaid version:
• Browser and Version: [Chrome, Edge, Firefox]

Suggested Solutions

No response

Additional Context

.mermaid elements that are not in the shadow dom can be converted to svg just fine.