Feat: Add support for replaying :defined pseudo-class of custom elements (#1155)

* Feat: Add support for replaying :defined pseudo-class of custom elements

* add isCustom flag to serialized elements

Applying Justin's review suggestion

* fix code lint error

* add custom element event

* fix: tests (#1348)

* Update packages/rrweb/src/record/observer.ts

* Update packages/rrweb/src/record/observer.ts

---------

Co-authored-by: Nafees Nehar <nafees87n@gmail.com>
Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com>

packages/rrweb-snapshot/src/rebuild.ts

@@ -142,6 +142,18 @@ function buildNode(
       if (n.isSVG) {
         node = doc.createElementNS('http://www.w3.org/2000/svg', tagName);
       } else {
+        if (
+          // If the tag name is a custom element name
+          n.isCustom &&
+          // If the browser supports custom elements
+          doc.defaultView?.customElements &&
+          // If the custom element hasn't been defined yet
+          !doc.defaultView.customElements.get(n.tagName)
+        )
+          doc.defaultView.customElements.define(
+            n.tagName,
+            class extends doc.defaultView.HTMLElement {},
+          );
         node = doc.createElement(tagName);
       }
       /**

packages/rrweb-snapshot/src/snapshot.ts

@@ -801,6 +801,13 @@ function serializeElementNode(
     delete attributes.src; // prevent auto loading
   }
 
+  let isCustomElement: true | undefined;
+  try {
+    if (customElements.get(tagName)) isCustomElement = true;
+  } catch (e) {
+    // In case old browsers don't support customElements
+  }
+
   return {
     type: NodeType.Element,
     tagName,
@@ -809,6 +816,7 @@ function serializeElementNode(
     isSVG: isSVGElement(n as Element) || undefined,
     needBlock,
     rootId,
+    isCustom: isCustomElement,
   };
 }
 

packages/rrweb-snapshot/src/types.ts

@@ -38,6 +38,8 @@ export type elementNode = {
   childNodes: serializedNodeWithId[];
   isSVG?: true;
   needBlock?: boolean;
+  // This is a custom element or not.
+  isCustom?: true;
 };
 
 export type textNode = {

packages/rrweb-snapshot/test/__snapshots__/integration.test.ts.snap

@@ -839,6 +839,7 @@ exports[`shadow DOM integration tests snapshot shadow DOM 1`] = `
                   \\"isShadow\\": true
                 }
               ],
+              \\"isCustom\\": true,
               \\"id\\": 16,
               \\"isShadowHost\\": true
             },

packages/rrweb-snapshot/tsconfig.json

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "composite": true,
     "module": "ESNext",
+    "target": "ES6",
     "moduleResolution": "Node",
     "noImplicitAny": true,
     "strictNullChecks": true,