fix issue #933 (#942)

* fix: style not applied to polyfillled shadow dom

* test: add integration test for shadydom and @lwc/synthetic-shadow

* improve the implementation of function isNativeShadowDom

* apply lele0108's review suggestion

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,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(shadowRoot: ShadowRoot) {
+  return Object.prototype.toString.call(shadowRoot) === '[object ShadowRoot]';
+}
+
 export class Mirror implements IMirror<Node> {
   private idNodeMap: idNodeMap = new Map();
   private nodeMetaMap: nodeMetaMap = new WeakMap();