fix: regression of issue: ShadowHost can't be a string (issue 941)

packages/rrweb/src/utils.ts

@@ -519,13 +519,12 @@ export class StyleSheetMirror {
   }
 }
 
-export function getRootShadowHost(n: Node): Node | null {
-  const shadowHost = (n.getRootNode() as ShadowRoot).host;
-  // If n is in a nested shadow dom.
-  let rootShadowHost = shadowHost;
+export function getRootShadowHost(n: Node): Node {
+  let rootShadowHost: Node = n;
 
+  // If n is in a nested shadow dom.
   while (
-    rootShadowHost?.getRootNode?.()?.nodeType === Node.DOCUMENT_FRAGMENT_NODE &&
+    rootShadowHost.getRootNode?.()?.nodeType === Node.DOCUMENT_FRAGMENT_NODE &&
     (rootShadowHost.getRootNode() as ShadowRoot).host
   )
     rootShadowHost = (rootShadowHost.getRootNode() as ShadowRoot).host;
@@ -537,7 +536,7 @@ export function shadowHostInDom(n: Node): boolean {
   const doc = n.ownerDocument;
   if (!doc) return false;
   const shadowHost = getRootShadowHost(n);
-  return Boolean(shadowHost && doc.contains(shadowHost));
+  return doc.contains(shadowHost);
 }
 
 export function inDom(n: Node): boolean {

packages/rrweb/test/util.test.ts

@@ -1,7 +1,12 @@
 /**
  * @jest-environment jsdom
  */
-import { StyleSheetMirror } from '../src/utils';
+import {
+  getRootShadowHost,
+  StyleSheetMirror,
+  inDom,
+  shadowHostInDom,
+} from '../src/utils';
 
 describe('Utilities for other modules', () => {
   describe('StyleSheetMirror', () => {
@@ -75,4 +80,60 @@ describe('Utilities for other modules', () => {
       expect(mirror.add(new CSSStyleSheet())).toBe(1);
     });
   });
+
+  describe('inDom()', () => {
+    it('should get correct result given nested shadow doms', () => {
+      const shadowHost = document.createElement('div');
+      const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
+      const shadowHost2 = document.createElement('div');
+      const shadowRoot2 = shadowHost2.attachShadow({ mode: 'open' });
+      const div = document.createElement('div');
+      shadowRoot.appendChild(shadowHost2);
+      shadowRoot2.appendChild(div);
+      // Not in Dom yet.
+      expect(getRootShadowHost(div)).toBe(shadowHost);
+      expect(shadowHostInDom(div)).toBeFalsy();
+      expect(inDom(div)).toBeFalsy();
+
+      // Added to the Dom.
+      document.body.appendChild(shadowHost);
+      expect(getRootShadowHost(div)).toBe(shadowHost);
+      expect(shadowHostInDom(div)).toBeTruthy();
+      expect(inDom(div)).toBeTruthy();
+    });
+
+    it('should get correct result given a normal node', () => {
+      const div = document.createElement('div');
+      // Not in Dom yet.
+      expect(getRootShadowHost(div)).toBe(div);
+      expect(shadowHostInDom(div)).toBeFalsy();
+      expect(inDom(div)).toBeFalsy();
+
+      // Added to the Dom.
+      document.body.appendChild(div);
+      expect(getRootShadowHost(div)).toBe(div);
+      expect(shadowHostInDom(div)).toBeTruthy();
+      expect(inDom(div)).toBeTruthy();
+    });
+
+    /**
+     * Given the textNode of a detached HTMLAnchorElement, getRootNode() will return the anchor element itself and its host property is a string.
+     * This corner case may cause an error in getRootShadowHost().
+     */
+    it('should get correct result given the textNode of a detached HTMLAnchorElement', () => {
+      const a = document.createElement('a');
+      a.href = 'example.com';
+      a.textContent = 'something';
+      // Not in Dom yet.
+      expect(getRootShadowHost(a.childNodes[0])).toBe(a.childNodes[0]);
+      expect(shadowHostInDom(a.childNodes[0])).toBeFalsy();
+      expect(inDom(a.childNodes[0])).toBeFalsy();
+
+      // Added to the Dom.
+      document.body.appendChild(a);
+      expect(getRootShadowHost(a.childNodes[0])).toBe(a.childNodes[0]);
+      expect(shadowHostInDom(a.childNodes[0])).toBeTruthy();
+      expect(inDom(a.childNodes[0])).toBeTruthy();
+    });
+  });
 });