fix: style not applied to polyfillled shadow dom

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,8 @@ 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;
+    if ((n as HTMLElement).shadowRoot && isNativeShadowDom())
+      serializedNode.isShadowHost = true;
   }
   if (
     (serializedNode.type === NodeType.Document ||
@@ -1075,14 +1080,14 @@ export function serializeNodeWithId(
       for (const childN of Array.from(n.shadowRoot.childNodes)) {
         const serializedChildNode = serializeNodeWithId(childN, bypassOptions);
         if (serializedChildNode) {
-          serializedChildNode.isShadow = true;
+          isNativeShadowDom() && (serializedChildNode.isShadow = true);
           serializedNode.childNodes.push(serializedChildNode);
         }
       }
     }
   }
 
-  if (n.parentNode && isShadowRoot(n.parentNode)) {
+  if (n.parentNode && isShadowRoot(n.parentNode) && isNativeShadowDom()) {
     serializedNode.isShadow = true;
   }
 

packages/rrweb-snapshot/src/utils.ts

@@ -16,6 +16,14 @@ 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() {
+  return window.ShadowRoot?.toString().indexOf('[native code]') > -1;
+}
+
 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(): 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()
+                  ? 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()) return;
     initMutationObserver(
       {
         ...this.bypassOptions,