diff --git a/.changeset/fluffy-planes-retire.md b/.changeset/fluffy-planes-retire.md
new file mode 100644
index 0000000000..41e9601704
--- /dev/null
+++ b/.changeset/fluffy-planes-retire.md
@@ -0,0 +1,5 @@
+---
+'rrweb': patch
+---
+
+Feat: Add support for replaying :defined pseudo-class of custom elements
diff --git a/.changeset/smart-ears-refuse.md b/.changeset/smart-ears-refuse.md
new file mode 100644
index 0000000000..0aaaabcf0f
--- /dev/null
+++ b/.changeset/smart-ears-refuse.md
@@ -0,0 +1,7 @@
+---
+'rrweb-snapshot': patch
+---
+
+Feat: Add 'isCustom' flag to serialized elements.
+
+This flag is used to indicate whether the element is a custom element or not. This is useful for replaying the :defined pseudo-class of custom elements.
diff --git a/packages/rrweb-snapshot/src/rebuild.ts b/packages/rrweb-snapshot/src/rebuild.ts
index 6531cfe339..97faedf1da 100644
--- a/packages/rrweb-snapshot/src/rebuild.ts
+++ b/packages/rrweb-snapshot/src/rebuild.ts
@@ -170,6 +170,18 @@ function buildNode(
       if (n.isSVG) {
         node = doc.createElementNS('http://www.w3.org/2000/svg', tagName);
       } else {
+        if (
+          // If the tag name is a custom element name
+          n.isCustom &&
+          // If the browser supports custom elements
+          doc.defaultView?.customElements &&
+          // If the custom element hasn't been defined yet
+          !doc.defaultView.customElements.get(n.tagName)
+        )
+          doc.defaultView.customElements.define(
+            n.tagName,
+            class extends doc.defaultView.HTMLElement {},
+          );
         node = doc.createElement(tagName);
       }
       /**
diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
index 0963e6cfef..e6b25dc92b 100644
--- a/packages/rrweb-snapshot/src/snapshot.ts
+++ b/packages/rrweb-snapshot/src/snapshot.ts
@@ -801,6 +801,13 @@ function serializeElementNode(
     delete attributes.src; // prevent auto loading
   }
 
+  let isCustomElement: true | undefined;
+  try {
+    if (customElements.get(tagName)) isCustomElement = true;
+  } catch (e) {
+    // In case old browsers don't support customElements
+  }
+
   return {
     type: NodeType.Element,
     tagName,
@@ -809,6 +816,7 @@ function serializeElementNode(
     isSVG: isSVGElement(n as Element) || undefined,
     needBlock,
     rootId,
+    isCustom: isCustomElement,
   };
 }
 
diff --git a/packages/rrweb-snapshot/src/types.ts b/packages/rrweb-snapshot/src/types.ts
index e573dfc1e0..90d31c171a 100644
--- a/packages/rrweb-snapshot/src/types.ts
+++ b/packages/rrweb-snapshot/src/types.ts
@@ -38,6 +38,8 @@ export type elementNode = {
   childNodes: serializedNodeWithId[];
   isSVG?: true;
   needBlock?: boolean;
+  // This is a custom element or not.
+  isCustom?: true;
 };
 
 export type textNode = {
diff --git a/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap b/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
index a50f27cebe..77beb3be81 100644
--- a/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
+++ b/packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap
@@ -839,6 +839,7 @@ exports[`shadow DOM integration tests snapshot shadow DOM 1`] = `
                   \\"isShadow\\": true
                 }
               ],
+              \\"isCustom\\": true,
               \\"id\\": 16,
               \\"isShadowHost\\": true
             },
diff --git a/packages/rrweb-snapshot/tsconfig.json b/packages/rrweb-snapshot/tsconfig.json
index 2766ca4a82..45e8df8efd 100644
--- a/packages/rrweb-snapshot/tsconfig.json
+++ b/packages/rrweb-snapshot/tsconfig.json
@@ -3,6 +3,7 @@
     "target": "ES6",
     "composite": true,
     "module": "ESNext",
+    "target": "ES6",
     "moduleResolution": "Node",
     "noImplicitAny": true,
     "strictNullChecks": true,
diff --git a/packages/rrweb/src/record/iframe-manager.ts b/packages/rrweb/src/record/iframe-manager.ts
index 00fbb42372..79818387ab 100644
--- a/packages/rrweb/src/record/iframe-manager.ts
+++ b/packages/rrweb/src/record/iframe-manager.ts
@@ -235,6 +235,7 @@ export class IframeManager {
         }
       }
     }
+    return false;
   }
 
   private replace<T extends Record<string, unknown>>(
diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts
index b09baf6139..f58d987a8b 100644
--- a/packages/rrweb/src/record/index.ts
+++ b/packages/rrweb/src/record/index.ts
@@ -528,6 +528,17 @@ function record<T = eventWithTime>(
               }),
             );
           },
+          customElementCb: (c) => {
+            wrappedEmit(
+              wrapEvent({
+                type: EventType.IncrementalSnapshot,
+                data: {
+                  source: IncrementalSource.CustomElement,
+                  ...c,
+                },
+              }),
+            );
+          },
           blockClass,
           ignoreClass,
           ignoreSelector,
diff --git a/packages/rrweb/src/record/observer.ts b/packages/rrweb/src/record/observer.ts
index 2120a71df5..6876c7c28a 100644
--- a/packages/rrweb/src/record/observer.ts
+++ b/packages/rrweb/src/record/observer.ts
@@ -31,6 +31,7 @@ import {
   styleDeclarationCallback,
   styleSheetRuleCallback,
   viewportResizeCallback,
+  customElementCallback
 } from '@amplitude/rrweb-types';
 import type { FontFaceSet } from 'css-font-loading-module';
 import type { MutationBufferParam, observerParam } from '../types';
@@ -1173,6 +1174,44 @@ function initSelectionObserver(param: observerParam): listenerHandler {
   return on('selectionchange', updateSelection);
 }
 
+function initCustomElementObserver({
+  doc,
+  customElementCb,
+}: observerParam): listenerHandler {
+  const win = doc.defaultView as IWindow;
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  if (!win || !win.customElements) return () => {};
+  const restoreHandler = patch(
+    win.customElements,
+    'define',
+    function (
+      original: (
+        name: string,
+        constructor: CustomElementConstructor,
+        options?: ElementDefinitionOptions,
+      ) => void,
+    ) {
+      return function (
+        name: string,
+        constructor: CustomElementConstructor,
+        options?: ElementDefinitionOptions,
+      ) {
+        try {
+          customElementCb({
+            define: {
+              name,
+            },
+          });
+        } catch (e) {
+          console.warn(`Custom element callback failed for ${name}`);
+        }
+        return original.apply(this, [name, constructor, options]);
+      };
+    },
+  );
+  return restoreHandler;
+}
+
 function mergeHooks(o: observerParam, hooks: hooksParam) {
   const {
     mutationCb,
@@ -1187,6 +1226,7 @@ function mergeHooks(o: observerParam, hooks: hooksParam) {
     canvasMutationCb,
     fontCb,
     selectionCb,
+    customElementCb,
   } = o;
   o.mutationCb = (...p: Arguments<mutationCallBack>) => {
     if (hooks.mutation) {
@@ -1260,6 +1300,12 @@ function mergeHooks(o: observerParam, hooks: hooksParam) {
     }
     selectionCb(...p);
   };
+  o.customElementCb = (...c: Arguments<customElementCallback>) => {
+    if (hooks.customElement) {
+      hooks.customElement(...c);
+    }
+    customElementCb(...c);
+  };
 }
 
 export function initObservers(
@@ -1306,6 +1352,7 @@ export function initObservers(
     }
   }
   const selectionObserver = initSelectionObserver(o);
+  const customElementObserver = initCustomElementObserver(o);
 
   // plugins
   const pluginHandlers: listenerHandler[] = [];
@@ -1329,6 +1376,7 @@ export function initObservers(
     styleDeclarationObserver();
     fontObserver();
     selectionObserver();
+    customElementObserver();
     pluginHandlers.forEach((h) => h());
   });
 }
diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts
index 5c26322414..9fff957833 100644
--- a/packages/rrweb/src/types.ts
+++ b/packages/rrweb/src/types.ts
@@ -15,6 +15,7 @@ import type {
   addedNodeMutation,
   blockClass,
   canvasMutationCallback,
+  customElementCallback,
   eventWithTime,
   fontCallback,
   hooksParam,
@@ -97,6 +98,7 @@ export type observerParam = {
   styleSheetRuleCb: styleSheetRuleCallback;
   styleDeclarationCb: styleDeclarationCallback;
   canvasMutationCb: canvasMutationCallback;
+  customElementCb: customElementCallback;
   fontCb: fontCallback;
   sampling: SamplingStrategy;
   recordDOM: boolean;
diff --git a/packages/rrweb/test/events/custom-element-define-class.ts b/packages/rrweb/test/events/custom-element-define-class.ts
new file mode 100644
index 0000000000..3f9bd9fa6b
--- /dev/null
+++ b/packages/rrweb/test/events/custom-element-define-class.ts
@@ -0,0 +1,89 @@
+import { EventType } from '@rrweb/types';
+import type { eventWithTime } from '@rrweb/types';
+
+const now = Date.now();
+const events: eventWithTime[] = [
+  {
+    type: EventType.DomContentLoaded,
+    data: {},
+    timestamp: now,
+  },
+  {
+    type: EventType.Load,
+    data: {},
+    timestamp: now + 100,
+  },
+  {
+    type: EventType.Meta,
+    data: {
+      href: 'http://localhost',
+      width: 1000,
+      height: 800,
+    },
+    timestamp: now + 100,
+  },
+  // full snapshot:
+  {
+    data: {
+      node: {
+        id: 1,
+        type: 0,
+        childNodes: [
+          { id: 2, name: 'html', type: 1, publicId: '', systemId: '' },
+          {
+            id: 3,
+            type: 2,
+            tagName: 'html',
+            attributes: { lang: 'en' },
+            childNodes: [
+              {
+                id: 4,
+                type: 2,
+                tagName: 'head',
+                attributes: {},
+                childNodes: [
+                  {
+                    id: 5,
+                    type: 2,
+                    tagName: 'style',
+                    childNodes: [
+                      {
+                        id: 6,
+                        type: 3,
+                        isStyle: true,
+                        // Set style of defined custom element to display: block
+                        // Set undefined custom element to display: none
+                        textContent:
+                          'custom-element:not(:defined) { display: none;} \n custom-element:defined { display: block; }',
+                      },
+                    ],
+                  },
+                ],
+              },
+              {
+                id: 7,
+                type: 2,
+                tagName: 'body',
+                attributes: {},
+                childNodes: [
+                  {
+                    id: 8,
+                    type: 2,
+                    tagName: 'custom-element',
+                    childNodes: [],
+                    isCustom: true,
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      initialOffset: { top: 0, left: 0 },
+    },
+    type: EventType.FullSnapshot,
+    timestamp: now + 100,
+  },
+];
+
+export default events;
diff --git a/packages/rrweb/test/replayer.test.ts b/packages/rrweb/test/replayer.test.ts
index cbf6ca75f2..8097189b8a 100644
--- a/packages/rrweb/test/replayer.test.ts
+++ b/packages/rrweb/test/replayer.test.ts
@@ -23,6 +23,7 @@ import {
   sampleStyleSheetRemoveEvents as stylesheetRemoveEvents,
   waitForRAF,
 } from './utils';
+import customElementDefineClass from './events/custom-element-define-class';
 
 interface ISuite {
   code: string;
@@ -1076,4 +1077,19 @@ describe('replayer', function () {
       ),
     ).toBe(':hover');
   });
+
+  it('should replay styles with :define pseudo-class', async () => {
+    await page.evaluate(`events = ${JSON.stringify(customElementDefineClass)}`);
+
+    const displayValue = await page.evaluate(`
+      const { Replayer } = rrweb;
+      const replayer = new Replayer(events);
+      replayer.pause(200);
+      const customElement = replayer.iframe.contentDocument.querySelector('custom-element');
+      window.getComputedStyle(customElement).display;
+    `);
+    // If the custom element is not defined, the display value will be 'none'.
+    // If the custom element is defined, the display value will be 'block'.
+    expect(displayValue).toEqual('block');
+  });
 });
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index 85e0efd5c6..41eb069adb 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -83,6 +83,7 @@ export enum IncrementalSource {
   StyleDeclaration,
   Selection,
   AdoptedStyleSheet,
+  CustomElement,
 }
 
 export type mutationData = {
@@ -142,6 +143,10 @@ export type adoptedStyleSheetData = {
   source: IncrementalSource.AdoptedStyleSheet;
 } & adoptedStyleSheetParam;
 
+export type customElementData = {
+  source: IncrementalSource.CustomElement;
+} & customElementParam;
+
 export type incrementalData =
   | mutationData
   | mousemoveData
@@ -155,7 +160,8 @@ export type incrementalData =
   | fontData
   | selectionData
   | styleDeclarationData
-  | adoptedStyleSheetData;
+  | adoptedStyleSheetData
+  | customElementData;
 
 export type event =
   | domContentLoadedEvent
@@ -262,6 +268,7 @@ export type hooksParam = {
   canvasMutation?: canvasMutationCallback;
   font?: fontCallback;
   selection?: selectionCallback;
+  customElement?: customElementCallback;
 };
 
 // https://dom.spec.whatwg.org/#interface-mutationrecord
@@ -593,6 +600,14 @@ export type selectionParam = {
 
 export type selectionCallback = (p: selectionParam) => void;
 
+export type customElementParam = {
+  define?: {
+    name: string;
+  };
+};
+
+export type customElementCallback = (c: customElementParam) => void;
+
 export type DeprecatedMirror = {
   map: {
     [key: number]: INode;