From 51a1b7e446df0f3cbebd0243b3582fc228152fb1 Mon Sep 17 00:00:00 2001
From: "lei.yang03" <lei.yang03@qingteng.cn>
Date: Tue, 20 Feb 2024 15:04:37 +0800
Subject: [PATCH] [#1412] fix Changes in the canvas within the Shadow DOM
 cannot be recorded

---
 .../record/observers/canvas/canvas-manager.ts | 26 +++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts
index a8e06e468b..046fa0a5ca 100644
--- a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts
+++ b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts
@@ -161,11 +161,27 @@ export class CanvasManager {
 
     const getCanvas = (): HTMLCanvasElement[] => {
       const matchedCanvas: HTMLCanvasElement[] = [];
-      win.document.querySelectorAll('canvas').forEach((canvas) => {
-        if (!isBlocked(canvas, blockClass, blockSelector, true)) {
-          matchedCanvas.push(canvas);
-        }
-      });
+
+      // traverse DOM and Shadow DOM
+      const traverseDom = (root: Document | ShadowRoot) => {
+        root.querySelectorAll('canvas').forEach((canvas) => {
+          if (
+            canvas instanceof HTMLCanvasElement &&
+            !isBlocked(canvas, blockClass, blockSelector, true)
+          ) {
+            matchedCanvas.push(canvas);
+          }
+        });
+
+        root.querySelectorAll('*').forEach((elem) => {
+          if (elem.shadowRoot) {
+            traverseDom(elem.shadowRoot);
+          }
+        });
+      };
+
+      traverseDom(win.document);
+
       return matchedCanvas;
     };