From ecabd349058475efa05ffa28a327a87174f4d76a Mon Sep 17 00:00:00 2001
From: Michael Dellanoce <mdellanoce@pendo.io>
Date: Tue, 16 Jan 2024 14:58:55 -0500
Subject: [PATCH] traverse children in reverse order

---
 .changeset/unlucky-flowers-remember.md | 5 +++++
 packages/rrweb/src/record/mutation.ts  | 9 ++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/unlucky-flowers-remember.md

diff --git a/.changeset/unlucky-flowers-remember.md b/.changeset/unlucky-flowers-remember.md
new file mode 100644
index 0000000000..3df394438a
--- /dev/null
+++ b/.changeset/unlucky-flowers-remember.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+traverse childNodes in reverse order to match desired serialization order
diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
index 2f6b6550ff..92ccaa82bc 100644
--- a/packages/rrweb/src/record/mutation.ts
+++ b/packages/rrweb/src/record/mutation.ts
@@ -728,12 +728,15 @@ export default class MutationBuffer {
     // if this node is blocked `serializeNode` will turn it into a placeholder element
     // but we have to remove it's children otherwise they will be added as placeholders too
     if (!isBlocked(n, this.blockClass, this.blockSelector, false)) {
-      n.childNodes.forEach((childN) => this.genAdds(childN));
+      for (let i = n.childNodes.length - 1; i >= 0; --i) {
+        this.genAdds(n.childNodes[i]);
+      }
       if (hasShadowRoot(n)) {
-        n.shadowRoot.childNodes.forEach((childN) => {
+        for (let j = n.shadowRoot.childNodes.length - 1; j >= 0; --j) {
+          let childN = n.shadowRoot.childNodes[j];
           this.processedNodeManager.add(childN, this);
           this.genAdds(childN, n);
-        });
+        }
       }
     }
   };