[#1412] fix Changes in the canvas within the Shadow DOM cannot be rec…

…orded
rrweb-io · Feb 20, 2024 · 51a1b7e · 51a1b7e
1 parent 314a8dd
commit 51a1b7e
Showing 1 changed file with 21 additions and 5 deletions.
diff --git 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;
     };