fix issue #933

packages/rrweb-snapshot/src/snapshot.ts

@@ -18,6 +18,7 @@ import {
   isElement,
   isShadowRoot,
   maskInputValue,
+  isNativeShadowDom,
 } from './utils';
 
 let _id = 1;
@@ -248,7 +249,10 @@ export function transformAttribute(
   value: string,
 ): string {
   // relative path in attribute
-  if (name === 'src' || (name === 'href' && value && !(tagName === 'use' && value[0] === '#'))) {
+  if (
+    name === 'src' ||
+    (name === 'href' && value && !(tagName === 'use' && value[0] === '#'))
+  ) {
     // href starts with a # is an id pointer for svg
     return absoluteToDoc(doc, value);
   } else if (name === 'xlink:href' && value && value[0] !== '#') {
@@ -1025,7 +1029,9 @@ export function serializeNodeWithId(
     recordChild = recordChild && !serializedNode.needBlock;
     // this property was not needed in replay side
     delete serializedNode.needBlock;
-    if ((n as HTMLElement).shadowRoot) serializedNode.isShadowHost = true;
+    const shadowRoot = (n as HTMLElement).shadowRoot;
+    if (shadowRoot && isNativeShadowDom(shadowRoot))
+      serializedNode.isShadowHost = true;
   }
   if (
     (serializedNode.type === NodeType.Document ||
@@ -1075,14 +1081,19 @@ export function serializeNodeWithId(
       for (const childN of Array.from(n.shadowRoot.childNodes)) {
         const serializedChildNode = serializeNodeWithId(childN, bypassOptions);
         if (serializedChildNode) {
-          serializedChildNode.isShadow = true;
+          isNativeShadowDom(n.shadowRoot) &&
+            (serializedChildNode.isShadow = true);
           serializedNode.childNodes.push(serializedChildNode);
         }
       }
     }
   }
 
-  if (n.parentNode && isShadowRoot(n.parentNode)) {
+  if (
+    n.parentNode &&
+    isShadowRoot(n.parentNode) &&
+    isNativeShadowDom(n.parentNode)
+  ) {
     serializedNode.isShadow = true;
   }
 

packages/rrweb-snapshot/src/utils.ts

@@ -16,6 +16,28 @@ export function isShadowRoot(n: Node): n is ShadowRoot {
   return Boolean(host?.shadowRoot === n);
 }
 
+/**
+ * To fix the issue https://github.com/rrweb-io/rrweb/issues/933.
+ * Some websites use polyfilled shadow dom and this function is used to detect this situation.
+ */
+export function isNativeShadowDom(shadowRoot: ShadowRoot) {
+  return (
+    /**
+     * Some websites use shady dom https://github.com/webcomponents/polyfills/tree/master/packages/shadydom to polyfill the shadow dom and this will cause some issues during the recording.
+     * This statement is to determine whether the current website is polyfilled by shadydom or not.
+     */
+    !(window as Window & typeof globalThis & { ShadyDOM: object }).ShadyDOM &&
+    shadowRoot &&
+    /**
+     * https://github.com/salesforce/lwc/blob/v2.20.3/packages/@lwc/shared/src/keys.ts#L9
+     * All synthetic shadow roots contain the property $shadowResolver$ and this can be used to distinguish them from the native shadowRoot.
+     */
+    !(shadowRoot as ShadowRoot & {
+      $shadowResolver$?: (...args: unknown[]) => unknown;
+    }).$shadowResolver$
+  );
+}
+
 export class Mirror implements IMirror<Node> {
   private idNodeMap: idNodeMap = new Map();
   private nodeMetaMap: nodeMetaMap = new WeakMap();

packages/rrweb-snapshot/typings/utils.d.ts

@@ -1,6 +1,7 @@
 import { MaskInputFn, MaskInputOptions, IMirror, serializedNodeWithId } from './types';
 export declare function isElement(n: Node): n is Element;
 export declare function isShadowRoot(n: Node): n is ShadowRoot;
+export declare function isNativeShadowDom(shadowRoot: ShadowRoot): boolean;
 export declare class Mirror implements IMirror<Node> {
     private idNodeMap;
     private nodeMetaMap;

packages/rrweb/src/record/mutation.ts

@@ -6,6 +6,7 @@ import {
   needMaskingText,
   maskInputValue,
   Mirror,
+  isNativeShadowDom,
 } from 'rrweb-snapshot';
 import type {
   mutationRecord,
@@ -581,7 +582,10 @@ export default class MutationBuffer {
             this.removes.push({
               parentId,
               id: nodeId,
-              isShadow: isShadowRoot(m.target) ? true : undefined,
+              isShadow:
+                isShadowRoot(m.target) && isNativeShadowDom(m.target)
+                  ? true
+                  : undefined,
             });
           }
           this.mapRemoves.push(n);

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

@@ -7,6 +7,7 @@ import type {
 import { initMutationObserver, initScrollObserver } from './observer';
 import { patch } from '../utils';
 import type { Mirror } from 'rrweb-snapshot';
+import { isNativeShadowDom } from 'rrweb-snapshot';
 
 type BypassOptions = Omit<
   MutationBufferParam,
@@ -53,6 +54,7 @@ export class ShadowDomManager {
   }
 
   public addShadowRoot(shadowRoot: ShadowRoot, doc: Document) {
+    if (!isNativeShadowDom(shadowRoot)) return;
     initMutationObserver(
       {
         ...this.bypassOptions,