feat(replay): Define custom elements (web components)

Define custom elements so that we the `:defined` pseudo-class works as it can be used as a "loading" indicator while the web component is being loaded.

Fixes getsentry/sentry-javascript#7988

Author: billyvg

packages/rrweb-snapshot/src/rebuild.ts

@@ -8,7 +8,7 @@ import {
   INode,
   BuildCache,
 } from './types';
-import { isElement } from './utils';
+import { defineCustomElement, isElement } from './utils';
 
 const tagMap: tagMap = {
   script: 'noscript',
@@ -284,6 +284,9 @@ function buildNode(
          */
         if (!node.shadowRoot) {
           node.attachShadow({ mode: 'open' });
+          if (doc.defaultView) {
+            defineCustomElement(doc.defaultView, tagName);
+          }
         } else {
           while (node.shadowRoot.firstChild) {
             node.shadowRoot.removeChild(node.shadowRoot.firstChild);

packages/rrweb-snapshot/src/utils.ts

@@ -171,3 +171,20 @@ export function getInputValue(
 
   return el.value;
 }
+
+/**
+ * Ensure we define custom elements as you can have css that targets the
+ * `:defined` pseudo class (e.g. hide until defined)
+ */
+export function defineCustomElement(w: Window, elementName: string) {
+  // We need to define custom elements inside of the correct window (i.e.
+  // inside of the iframe)
+  try {
+    // Can only define custom element once
+    if (!w.customElements.get(elementName)) {
+      // @ts-ignore HTMLElement exists on window
+      const CustomElement = w.HTMLElement as CustomElementConstructor;
+      w.customElements.define(elementName, class extends CustomElement {});
+    }
+  } catch {}
+}

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

@@ -20,4 +20,5 @@ export declare function maskInputValue({ input, maskInputSelector, unmaskInputSe
 export declare function is2DCanvasBlank(canvas: HTMLCanvasElement): boolean;
 export declare function getInputType(element: HTMLElement): Lowercase<string> | null;
 export declare function getInputValue(el: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | HTMLOptionElement, tagName: Uppercase<string>, type: attributes[string]): string;
+export declare function defineCustomElement(w: Window, elementName: string): void;
 export {};

packages/rrweb/src/replay/index.ts

@@ -5,6 +5,7 @@ import {
   NodeType,
   BuildCache,
   createCache,
+  defineCustomElement,
 } from '@sentry-internal/rrweb-snapshot';
 import * as mittProxy from 'mitt';
 import { polyfill as smoothscrollPolyfill } from './smoothscroll';
@@ -1458,8 +1459,12 @@ export class Replayer {
       if (mutation.node.isShadow) {
         // If the parent is attached a shadow dom after it's created, it won't have a shadow root.
         if (!hasShadowRoot(parent)) {
-          ((parent as Node) as HTMLElement).attachShadow({ mode: 'open' });
-          parent = ((parent as Node) as HTMLElement).shadowRoot!;
+          const parentNode = parent as Node;
+          (parentNode as HTMLElement).attachShadow({ mode: 'open' });
+          parent = (parentNode as HTMLElement).shadowRoot!;
+          if (this.iframe.contentWindow) {
+            defineCustomElement(this.iframe.contentWindow, parentNode.nodeName);
+          }
         } else parent = parent.shadowRoot;
       }