fix: duplicated elements in shadow doms

clean observers before taking new full snapshots

packages/rrweb/src/record/shadow-dom-manager.ts

@@ -26,6 +26,7 @@ export class ShadowDomManager {
   private scrollCb: scrollCallback;
   private bypassOptions: BypassOptions;
   private mirror: Mirror;
+  private observerHandlers: (() => void)[] = [];
   private restorePatches: (() => void)[] = [];
 
   constructor(options: {
@@ -66,7 +67,7 @@ export class ShadowDomManager {
     if (!isNativeShadowDom(shadowRoot)) return;
     if (this.shadowDoms.has(shadowRoot)) return;
     this.shadowDoms.add(shadowRoot);
-    initMutationObserver(
+    const observer = initMutationObserver(
       {
         ...this.bypassOptions,
         doc,
@@ -76,14 +77,17 @@ export class ShadowDomManager {
       },
       shadowRoot,
     );
-    initScrollObserver({
-      ...this.bypassOptions,
-      scrollCb: this.scrollCb,
-      // https://gist.github.com/praveenpuglia/0832da687ed5a5d7a0907046c9ef1813
-      // scroll is not allowed to pass the boundary, so we need to listen the shadow document
-      doc: (shadowRoot as unknown) as Document,
-      mirror: this.mirror,
-    });
+    this.observerHandlers.push(() => observer.disconnect());
+    this.observerHandlers.push(
+      initScrollObserver({
+        ...this.bypassOptions,
+        scrollCb: this.scrollCb,
+        // https://gist.github.com/praveenpuglia/0832da687ed5a5d7a0907046c9ef1813
+        // scroll is not allowed to pass the boundary, so we need to listen the shadow document
+        doc: (shadowRoot as unknown) as Document,
+        mirror: this.mirror,
+      }),
+    );
     // Defer this to avoid adoptedStyleSheet events being created before the full snapshot is created or attachShadow action is recorded.
     setTimeout(() => {
       if (
@@ -94,12 +98,14 @@ export class ShadowDomManager {
           shadowRoot.adoptedStyleSheets,
           this.mirror.getId(shadowRoot.host),
         );
-      initAdoptedStyleSheetObserver(
-        {
-          mirror: this.mirror,
-          stylesheetManager: this.bypassOptions.stylesheetManager,
-        },
-        shadowRoot,
+      this.observerHandlers.push(
+        initAdoptedStyleSheetObserver(
+          {
+            mirror: this.mirror,
+            stylesheetManager: this.bypassOptions.stylesheetManager,
+          },
+          shadowRoot,
+        ),
       );
     }, 0);
   }
@@ -135,6 +141,14 @@ export class ShadowDomManager {
 
   public clearCache() {
     this.shadowDoms = new WeakSet();
+    this.observerHandlers.forEach((handler) => {
+      try {
+        handler();
+      } catch (e) {
+        //
+      }
+    });
+    this.observerHandlers = [];
   }
 
   public reset() {