From 921c6ac698a73c5b8861b1143be2f541d83a7943 Mon Sep 17 00:00:00 2001
From: Steven Kitterman <steven.kitterman@gmail.com>
Date: Tue, 22 Oct 2024 10:16:59 -0700
Subject: [PATCH 1/3] Rebuilding rebuilds adopted stylesheets in shadow DOM

---
 packages/rrweb-snapshot/src/rebuild.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts
index e4a4c9df4f..72d18725c1 100644
--- a/packages/rrweb-snapshot/src/rebuild.ts
+++ b/packages/rrweb-snapshot/src/rebuild.ts
@@ -152,7 +152,7 @@ export function buildStyleNode(
 }
 
 function buildNode(
-  n: serializedNodeWithId,
+  n: serializedNodeWithId & { rrwebAdoptedStylesheets?: string[] },
   options: {
     doc: Document;
     hackCss: boolean;
@@ -380,6 +380,13 @@ function buildNode(
          */
         if (!node.shadowRoot) {
           node.attachShadow({ mode: 'open' });
+          n.rrwebAdoptedStylesheets?.forEach(
+            (rrwebAdoptedStylesheet) => {
+              const styleSheet = new CSSStyleSheet();
+              styleSheet.replaceSync(rrwebAdoptedStylesheet);
+              node.shadowRoot?.adoptedStyleSheets.push(styleSheet);
+            },
+          );
         } else {
           while (node.shadowRoot.firstChild) {
             node.shadowRoot.removeChild(node.shadowRoot.firstChild);

From d23819159ca0c5131c6b434b701ca9485f5c5c8f Mon Sep 17 00:00:00 2001
From: Steven Kitterman <steven.kitterman@gmail.com>
Date: Tue, 22 Oct 2024 10:18:22 -0700
Subject: [PATCH 2/3] constructed stylesheets in shadow DOM are snapshotted

---
 packages/rrweb-snapshot/src/snapshot.ts | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
index cd3d7189b7..c17b963470 100644
--- a/packages/rrweb-snapshot/src/snapshot.ts
+++ b/packages/rrweb-snapshot/src/snapshot.ts
@@ -1008,7 +1008,10 @@ export function serializeNodeWithId(
     id = genId();
   }
 
-  const serializedNode = Object.assign(_serializedNode, { id });
+  const serializedNode: serializedNode & {
+    id: number;
+    rrwebAdoptedStylesheets?: Array<string | null>;
+  } = Object.assign(_serializedNode, { id });
   // add IGNORED_NODE to mirror to track nextSiblings
   mirror.add(n, serializedNode);
 
@@ -1025,8 +1028,15 @@ export function serializeNodeWithId(
     // this property was not needed in replay side
     delete serializedNode.needBlock;
     const shadowRootEl = dom.shadowRoot(n);
-    if (shadowRootEl && isNativeShadowDom(shadowRootEl))
+    if (shadowRootEl && isNativeShadowDom(shadowRootEl)) {
       serializedNode.isShadowHost = true;
+      if (shadowRootEl.adoptedStyleSheets.length > 0) {
+        serializedNode.rrwebAdoptedStylesheets =
+          shadowRootEl.adoptedStyleSheets.map((stylesheet) =>
+            stringifyStylesheet(stylesheet),
+          );
+      }
+    }
   }
   if (
     (serializedNode.type === NodeType.Document ||

From 2ebf5ab53a6f9d55da9e9ddaefc1d21d0f48ab04 Mon Sep 17 00:00:00 2001
From: Steven Kitterman <steven.kitterman@gmail.com>
Date: Tue, 22 Oct 2024 10:27:41 -0700
Subject: [PATCH 3/3] Prettier ran

---
 packages/rrweb-snapshot/src/rebuild.ts | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts
index 72d18725c1..a2f50858d6 100644
--- a/packages/rrweb-snapshot/src/rebuild.ts
+++ b/packages/rrweb-snapshot/src/rebuild.ts
@@ -380,13 +380,11 @@ function buildNode(
          */
         if (!node.shadowRoot) {
           node.attachShadow({ mode: 'open' });
-          n.rrwebAdoptedStylesheets?.forEach(
-            (rrwebAdoptedStylesheet) => {
-              const styleSheet = new CSSStyleSheet();
-              styleSheet.replaceSync(rrwebAdoptedStylesheet);
-              node.shadowRoot?.adoptedStyleSheets.push(styleSheet);
-            },
-          );
+          n.rrwebAdoptedStylesheets?.forEach((rrwebAdoptedStylesheet) => {
+            const styleSheet = new CSSStyleSheet();
+            styleSheet.replaceSync(rrwebAdoptedStylesheet);
+            node.shadowRoot?.adoptedStyleSheets.push(styleSheet);
+          });
         } else {
           while (node.shadowRoot.firstChild) {
             node.shadowRoot.removeChild(node.shadowRoot.firstChild);