diff --git a/typings/record/index.d.ts b/typings/record/index.d.ts
index 9c5e2043..469fde38 100644
--- a/typings/record/index.d.ts
+++ b/typings/record/index.d.ts
@@ -3,5 +3,6 @@ declare function record<T = eventWithTime>(options?: recordOptions<T>): listener
 declare namespace record {
     var addCustomEvent: <T>(tag: string, payload: T) => void;
     var freezePage: () => void;
+    var takeFullSnapshot: (isCheckout?: boolean | undefined) => void;
 }
 export default record;
diff --git a/typings/record/mutation.d.ts b/typings/record/mutation.d.ts
index 440d81a5..aaa05700 100644
--- a/typings/record/mutation.d.ts
+++ b/typings/record/mutation.d.ts
@@ -1,6 +1,7 @@
 import { MaskInputOptions, SlimDOMOptions } from 'rrweb-snapshot';
-import { mutationRecord, blockClass, mutationCallBack } from '../types';
+import { mutationRecord, blockClass, maskTextClass, mutationCallBack, MaskTextFn } from '../types';
 import { IframeManager } from './iframe-manager';
+import { ShadowDomManager } from './shadow-dom-manager';
 export default class MutationBuffer {
     private frozen;
     private locked;
@@ -15,13 +16,17 @@ export default class MutationBuffer {
     private emissionCallback;
     private blockClass;
     private blockSelector;
+    private maskTextClass;
+    private maskTextSelector;
     private inlineStylesheet;
     private maskInputOptions;
+    private maskTextFn;
     private recordCanvas;
     private slimDOMOptions;
     private doc;
     private iframeManager;
-    init(cb: mutationCallBack, blockClass: blockClass, blockSelector: string | null, inlineStylesheet: boolean, maskInputOptions: MaskInputOptions, recordCanvas: boolean, slimDOMOptions: SlimDOMOptions, doc: Document, iframeManager: IframeManager): void;
+    private shadowDomManager;
+    init(cb: mutationCallBack, blockClass: blockClass, blockSelector: string | null, maskTextClass: maskTextClass, maskTextSelector: string | null, inlineStylesheet: boolean, maskInputOptions: MaskInputOptions, maskTextFn: MaskTextFn | undefined, recordCanvas: boolean, slimDOMOptions: SlimDOMOptions, doc: Document, iframeManager: IframeManager, shadowDomManager: ShadowDomManager): void;
     freeze(): void;
     unfreeze(): void;
     isFrozen(): boolean;
diff --git a/typings/record/observer.d.ts b/typings/record/observer.d.ts
index 60eb7178..cfeda577 100644
--- a/typings/record/observer.d.ts
+++ b/typings/record/observer.d.ts
@@ -1,5 +1,9 @@
-import { observerParam, listenerHandler, hooksParam } from '../types';
+import { MaskInputOptions, SlimDOMOptions } from 'rrweb-snapshot';
+import { mutationCallBack, observerParam, listenerHandler, blockClass, maskTextClass, hooksParam, MaskTextFn } from '../types';
 import MutationBuffer from './mutation';
+import { IframeManager } from './iframe-manager';
+import { ShadowDomManager } from './shadow-dom-manager';
 export declare const mutationBuffers: MutationBuffer[];
+export declare function initMutationObserver(cb: mutationCallBack, doc: Document, blockClass: blockClass, blockSelector: string | null, maskTextClass: maskTextClass, maskTextSelector: string | null, inlineStylesheet: boolean, maskInputOptions: MaskInputOptions, maskTextFn: MaskTextFn | undefined, recordCanvas: boolean, slimDOMOptions: SlimDOMOptions, iframeManager: IframeManager, shadowDomManager: ShadowDomManager, rootEl: Node): MutationObserver;
 export declare const INPUT_TAGS: string[];
 export declare function initObservers(o: observerParam, hooks?: hooksParam): listenerHandler;
diff --git a/typings/record/shadow-dom-manager.d.ts b/typings/record/shadow-dom-manager.d.ts
new file mode 100644
index 00000000..1df3bcda
--- /dev/null
+++ b/typings/record/shadow-dom-manager.d.ts
@@ -0,0 +1,25 @@
+import { mutationCallBack, blockClass, maskTextClass, MaskTextFn } from '../types';
+import { MaskInputOptions, SlimDOMOptions } from 'rrweb-snapshot';
+import { IframeManager } from './iframe-manager';
+declare type BypassOptions = {
+    blockClass: blockClass;
+    blockSelector: string | null;
+    maskTextClass: maskTextClass;
+    maskTextSelector: string | null;
+    inlineStylesheet: boolean;
+    maskInputOptions: MaskInputOptions;
+    maskTextFn: MaskTextFn | undefined;
+    recordCanvas: boolean;
+    slimDOMOptions: SlimDOMOptions;
+    iframeManager: IframeManager;
+};
+export declare class ShadowDomManager {
+    private mutationCb;
+    private bypassOptions;
+    constructor(options: {
+        mutationCb: mutationCallBack;
+        bypassOptions: BypassOptions;
+    });
+    addShadowRoot(shadowRoot: ShadowRoot, doc: Document): void;
+}
+export {};
diff --git a/typings/replay/index.d.ts b/typings/replay/index.d.ts
index 811c51fd..f1df3a2f 100644
--- a/typings/replay/index.d.ts
+++ b/typings/replay/index.d.ts
@@ -19,6 +19,7 @@ export declare class Replayer {
     private fragmentParentMap;
     private elementStateMap;
     private imageMap;
+    private firstPlayedEvent;
     private newDocumentQueue;
     constructor(events: Array<eventWithTime | string>, config?: Partial<playerConfig>);
     on(event: string, handler: Handler): this;
diff --git a/typings/rrdom/index.d.ts b/typings/rrdom/index.d.ts
new file mode 100644
index 00000000..cb0ff5c3
--- /dev/null
+++ b/typings/rrdom/index.d.ts
@@ -0,0 +1 @@
+export {};
diff --git a/typings/rrdom/tree-node.d.ts b/typings/rrdom/tree-node.d.ts
new file mode 100644
index 00000000..be3d9635
--- /dev/null
+++ b/typings/rrdom/tree-node.d.ts
@@ -0,0 +1,20 @@
+export declare type AnyObject = {
+    [key: string]: any;
+    __rrdom__?: RRdomTreeNode;
+};
+export declare class RRdomTreeNode implements AnyObject {
+    parent: AnyObject | null;
+    previousSibling: AnyObject | null;
+    nextSibling: AnyObject | null;
+    firstChild: AnyObject | null;
+    lastChild: AnyObject | null;
+    childrenVersion: number;
+    childIndexCachedUpTo: AnyObject | null;
+    cachedIndex: number;
+    cachedIndexVersion: number;
+    get isAttached(): boolean;
+    get hasChildren(): boolean;
+    childrenChanged(): void;
+    getCachedIndex(parentNode: AnyObject): number;
+    setCachedIndex(parentNode: AnyObject, index: number): void;
+}
diff --git a/typings/types.d.ts b/typings/types.d.ts
index 1d56b52a..f42927fc 100644
--- a/typings/types.d.ts
+++ b/typings/types.d.ts
@@ -1,9 +1,8 @@
-/// <reference types="node" />
 import { serializedNodeWithId, idNodeMap, INode, MaskInputOptions, SlimDOMOptions } from 'rrweb-snapshot';
 import { PackFn, UnpackFn } from './packer/base';
 import { FontFaceDescriptors } from 'css-font-loading-module';
 import { IframeManager } from './record/iframe-manager';
-import { MaskTextFn } from '../src/types';
+import { ShadowDomManager } from './record/shadow-dom-manager';
 export declare enum EventType {
     DomContentLoaded = 0,
     Load = 1,
@@ -66,13 +65,14 @@ export declare enum IncrementalSource {
     StyleSheetRule = 8,
     CanvasMutation = 9,
     Font = 10,
-    Log = 11
+    Log = 11,
+    Drag = 12
 }
 export declare type mutationData = {
     source: IncrementalSource.Mutation;
 } & mutationCallbackParam;
 export declare type mousemoveData = {
-    source: IncrementalSource.MouseMove | IncrementalSource.TouchMove;
+    source: IncrementalSource.MouseMove | IncrementalSource.TouchMove | IncrementalSource.Drag;
     positions: mousePosition[];
 };
 export declare type mouseInteractionData = {
@@ -126,7 +126,7 @@ export declare type recordOptions<T> = {
     blockSelector?: string;
     ignoreClass?: string;
     maskTextClass?: maskTextClass;
-    maskTextSelector?: string | null;
+    maskTextSelector?: string;
     maskAllInputs?: boolean;
     maskInputOptions?: MaskInputOptions;
     maskInputFn?: MaskInputFn;
@@ -151,9 +151,9 @@ export declare type observerParam = {
     mediaInteractionCb: mediaInteractionCallback;
     blockClass: blockClass;
     blockSelector: string | null;
+    ignoreClass: string;
     maskTextClass: maskTextClass;
     maskTextSelector: string | null;
-    ignoreClass: string;
     maskInputOptions: MaskInputOptions;
     maskInputFn?: MaskInputFn;
     maskTextFn?: MaskTextFn;
@@ -169,6 +169,7 @@ export declare type observerParam = {
     slimDOMOptions: SlimDOMOptions;
     doc: Document;
     iframeManager: IframeManager;
+    shadowDomManager: ShadowDomManager;
 };
 export declare type hooksParam = {
     mutation?: mutationCallBack;
@@ -214,6 +215,7 @@ export declare type attributeMutation = {
 export declare type removedNodeMutation = {
     parentId: number;
     id: number;
+    isShadow?: boolean;
 };
 export declare type addedNodeMutation = {
     parentId: number;
@@ -221,14 +223,15 @@ export declare type addedNodeMutation = {
     nextId: number | null;
     node: serializedNodeWithId;
 };
-declare type mutationCallbackParam = {
+export declare type mutationCallbackParam = {
     texts: textMutation[];
     attributes: attributeMutation[];
     removes: removedNodeMutation[];
     adds: addedNodeMutation[];
+    isAttachIframe?: true;
 };
 export declare type mutationCallBack = (m: mutationCallbackParam) => void;
-export declare type mousemoveCallBack = (p: mousePosition[], source: IncrementalSource.MouseMove | IncrementalSource.TouchMove) => void;
+export declare type mousemoveCallBack = (p: mousePosition[], source: IncrementalSource.MouseMove | IncrementalSource.TouchMove | IncrementalSource.Drag) => void;
 export declare type mousePosition = {
     x: number;
     y: number;
@@ -288,31 +291,31 @@ export declare type fontParam = {
 };
 export declare type LogLevel = 'assert' | 'clear' | 'count' | 'countReset' | 'debug' | 'dir' | 'dirxml' | 'error' | 'group' | 'groupCollapsed' | 'groupEnd' | 'info' | 'log' | 'table' | 'time' | 'timeEnd' | 'timeLog' | 'trace' | 'warn';
 export declare type Logger = {
-    assert?: (value: any, message?: string, ...optionalParams: any[]) => void;
-    clear?: () => void;
-    count?: (label?: string) => void;
-    countReset?: (label?: string) => void;
-    debug?: (message?: any, ...optionalParams: any[]) => void;
-    dir?: (obj: any, options?: NodeJS.InspectOptions) => void;
-    dirxml?: (...data: any[]) => void;
-    error?: (message?: any, ...optionalParams: any[]) => void;
-    group?: (...label: any[]) => void;
-    groupCollapsed?: (label?: any[]) => void;
+    assert?: typeof console.assert;
+    clear?: typeof console.clear;
+    count?: typeof console.count;
+    countReset?: typeof console.countReset;
+    debug?: typeof console.debug;
+    dir?: typeof console.dir;
+    dirxml?: typeof console.dirxml;
+    error?: typeof console.error;
+    group?: typeof console.group;
+    groupCollapsed?: typeof console.groupCollapsed;
     groupEnd?: () => void;
-    info?: (message?: any, ...optionalParams: any[]) => void;
-    log?: (message?: any, ...optionalParams: any[]) => void;
-    table?: (tabularData: any, properties?: ReadonlyArray<string>) => void;
-    time?: (label?: string) => void;
-    timeEnd?: (label?: string) => void;
-    timeLog?: (label?: string, ...data: any[]) => void;
-    trace?: (message?: any, ...optionalParams: any[]) => void;
-    warn?: (message?: any, ...optionalParams: any[]) => void;
+    info?: typeof console.info;
+    log?: typeof console.log;
+    table?: typeof console.table;
+    time?: typeof console.time;
+    timeEnd?: typeof console.timeEnd;
+    timeLog?: typeof console.timeLog;
+    trace?: typeof console.trace;
+    warn?: typeof console.warn;
 };
 export declare type ReplayLogger = Partial<Record<LogLevel, (data: logData) => void>>;
 export declare type LogParam = {
     level: LogLevel;
-    trace: Array<string>;
-    payload: Array<string>;
+    trace: string[];
+    payload: string[];
 };
 export declare type fontCallback = (p: fontParam) => void;
 export declare type logCallback = (p: LogParam) => void;
@@ -349,6 +352,7 @@ export declare type Mirror = {
     getNode: (id: number) => INode | null;
     removeNodeFromMap: (n: INode) => void;
     has: (id: number) => boolean;
+    reset: () => void;
 };
 export declare type throttleOptions = {
     leading?: boolean;
@@ -358,6 +362,7 @@ export declare type listenerHandler = () => void;
 export declare type hookResetter = () => void;
 export declare type playerConfig = {
     speed: number;
+    maxSpeed: number;
     root: Element;
     loadTimeout: number;
     skipInactive: boolean;
@@ -379,7 +384,7 @@ export declare type playerConfig = {
     logConfig: LogReplayConfig;
 };
 export declare type LogReplayConfig = {
-    level?: Array<LogLevel> | undefined;
+    level?: LogLevel[] | undefined;
     replayLogger: ReplayLogger | undefined;
 };
 export declare type playerMetaData = {
@@ -420,9 +425,11 @@ export declare enum ReplayerEvents {
     EventCast = "event-cast",
     CustomEvent = "custom-event",
     Flush = "flush",
-    StateChange = "state-change"
+    StateChange = "state-change",
+    PlayBack = "play-back"
 }
 export declare type MaskInputFn = (text: string) => string;
+export declare type MaskTextFn = (text: string) => string;
 export declare type ElementState = {
     scroll?: [number, number];
 };
@@ -431,7 +438,7 @@ export declare type StringifyOptions = {
     numOfKeysLimit: number;
 };
 export declare type LogRecordOptions = {
-    level?: Array<LogLevel> | undefined;
+    level?: LogLevel[] | undefined;
     lengthThreshold?: number;
     stringifyOptions?: StringifyOptions;
     logger?: Logger;
diff --git a/typings/utils.d.ts b/typings/utils.d.ts
index 8a4eb167..b6ab536b 100644
--- a/typings/utils.d.ts
+++ b/typings/utils.d.ts
@@ -60,6 +60,9 @@ export declare type AppendedIframe = {
     mutationInQueue: addedNodeMutation;
     builtNode: HTMLIFrameINode;
 };
-export declare function isIframeINode(node: INode): node is HTMLIFrameINode;
+export declare function isIframeINode(node: INode | ShadowRoot): node is HTMLIFrameINode;
 export declare function getBaseDimension(node: Node, rootIframe: Node): DocumentDimension;
+export declare function hasShadowRoot<T extends Node>(n: T): n is T & {
+    shadowRoot: ShadowRoot;
+};
 export {};