@kubesense/kubesense-browser-rum 1.8.0 → 2.0.0-beta.1

package/src/domain/record/recordingScope.ts

@@ -1,9 +1,10 @@
 import type { RumConfiguration } from '@kubesense/kubesense-browser-rum-core'
 
 import type { ElementsScrollPositions } from './elementsScrollPositions'
-import type { EventIds } from './eventIds'
-import type { NodeIds } from './nodeIds'
+import { createEventIds, createNodeIds, createStringIds, createStyleSheetIds } from './encoding'
+import type { EventIds, NodeIds, StringIds, StyleSheetIds } from './encoding'
 import type { ShadowRootsController } from './shadowRootsController'
+import type { CanvasManager } from './canvas/canvasManager'
 
 /**
  * State associated with a stream of session replay records. When a new stream of records
@@ -12,25 +13,47 @@ import type { ShadowRootsController } from './shadowRootsController'
  * or data which aren't present in the current stream.
  */
 export interface RecordingScope {
+  resetIds(): void
+
+  canvasManager: CanvasManager
   configuration: RumConfiguration
   elementsScrollPositions: ElementsScrollPositions
   eventIds: EventIds
   nodeIds: NodeIds
   shadowRootsController: ShadowRootsController
+  stringIds: StringIds
+  styleSheetIds: StyleSheetIds
 }
 
 export function createRecordingScope(
+  canvasManager: CanvasManager,
   configuration: RumConfiguration,
   elementsScrollPositions: ElementsScrollPositions,
-  eventIds: EventIds,
-  nodeIds: NodeIds,
   shadowRootsController: ShadowRootsController
 ): RecordingScope {
-  return {
+  const eventIds = createEventIds()
+  const nodeIds = createNodeIds()
+  const stringIds = createStringIds()
+  const styleSheetIds = createStyleSheetIds()
+
+  const scope: RecordingScope = {
+    resetIds(): void {
+      scope.eventIds.clear()
+      scope.nodeIds.clear()
+      scope.stringIds.clear()
+      scope.styleSheetIds.clear()
+      scope.canvasManager.reset()
+    },
+
+    canvasManager,
     configuration,
     elementsScrollPositions,
     eventIds,
     nodeIds,
     shadowRootsController,
+    stringIds,
+    styleSheetIds,
   }
+
+  return scope
 }

package/src/domain/record/serialization/index.ts

@@ -1,8 +1,10 @@
+export { createChildInsertionCursor, createRootInsertionCursor } from './insertionCursor'
 export { getElementInputValue } from './serializationUtils'
-export { serializeDocument } from './serializeDocument'
+export { serializeFullSnapshot } from './serializeFullSnapshot'
+export { serializeMutations } from './serializeMutations'
 export { serializeNode } from './serializeNode'
 export { serializeAttribute } from './serializeAttribute'
 export { createSerializationStats, updateSerializationStats, aggregateSerializationStats } from './serializationStats'
 export type { SerializationMetric, SerializationStats } from './serializationStats'
 export { serializeInTransaction, SerializationKind } from './serializationTransaction'
-export type { SerializationTransaction, SerializationTransactionCallback } from './serializationTransaction'
+export type { SerializationTransaction } from './serializationTransaction'

package/src/domain/record/serialization/insertionCursor.ts

@@ -0,0 +1,131 @@
+import type { InsertionPoint } from '../../../types'
+import type { NodeId, NodeIds } from '../encoding'
+
+/**
+ * InsertionCursor tracks the point at which the next node will be inserted during
+ * Change-style DOM serialization.
+ *
+ * When a new node is added to the document, we use an InsertionPoint to encode its
+ * position. There are often multiple equally-valid ways to express the same insertion
+ * point; we generally want to favor encodings that use as few characters as possible (to
+ * reduce uncompressed size) and that are as repetitive as possible (to reduce compressed
+ * size). InsertionCursor's purpose is to heuristically pick an efficient encoding based
+ * on the nodes we've recently serialized, while doing as little work as possible. The
+ * results are not optimal, but should be close to it in most situations.
+ *
+ * At the beginning of the serialization process, use a factory function like
+ * createRootInsertionCursor() to create a new cursor with an appropriate initial
+ * position.
+ *
+ * When visiting a node, the expected usage pattern is as follows:
+ * 1. Call advance() to get a node id and insertion point for the node.
+ * 2. Serialize the node.
+ * 3. If the node has no children, we're done; continue to the node's next
+ * sibling and apply this algorithm again.
+ * 4. Otherwise, call descend() to move the cursor into the node's child list.
+ * 5. Recursively apply this algorithm.
+ * 6. Call ascend() to move the cursor out of the node's child list. We're done;
+ * continue to the node's next sibling and apply this algorithm again.
+ */
+export interface InsertionCursor {
+  /**
+   * Given the node id for a new node, returns the InsertionPoint for that node.
+   * Updates the cursor to point to the new node's next sibling.
+   */
+  advance(node: Node): { nodeId: NodeId; insertionPoint: InsertionPoint }
+
+  /**
+   * Ascends out of the current child list and updates the cursor to point to the parent
+   * node's next sibling.
+   */
+  ascend(): void
+
+  /**
+   * Descends into the child list of the last node we inserted and updates the cursor to
+   * point to the node's first child.
+   */
+  descend(): void
+}
+
+/** Returns an InsertionCursor which starts positioned at the root of the document. */
+export function createRootInsertionCursor(nodeIds: NodeIds): InsertionCursor {
+  return createInsertionCursor(undefined, undefined, nodeIds)
+}
+
+/**
+ * Returns an InsertionCursor which starts positioned in the child list of the given
+ * parent node. If a next sibling is provided, the cursor points to the position
+ * immediately before the next sibling; otherwise, the cursor points to the end of the
+ * child list.
+ */
+export function createChildInsertionCursor(
+  parentId: NodeId,
+  nextSiblingId: NodeId | undefined,
+  nodeIds: NodeIds
+): InsertionCursor {
+  return createInsertionCursor(parentId, nextSiblingId, nodeIds)
+}
+
+function createInsertionCursor(
+  parentId: NodeId | undefined,
+  nextSiblingId: NodeId | undefined,
+  nodeIds: NodeIds
+): InsertionCursor {
+  interface ChildListCursor {
+    container: ChildListCursor | undefined
+    parentId: NodeId | undefined
+    previousSiblingId: NodeId | undefined
+    nextSiblingId: NodeId | undefined
+  }
+
+  let cursor: ChildListCursor = {
+    container: undefined,
+    parentId,
+    previousSiblingId: undefined,
+    nextSiblingId,
+  }
+
+  const computeInsertionPoint = (nodeId: NodeId): InsertionPoint => {
+    if (cursor.previousSiblingId === nodeId - 1) {
+      // Use an AppendAfterPreviousInsertionPoint. (i.e., 0)
+      return 0
+    }
+    if (cursor.nextSiblingId !== undefined) {
+      // Use an InsertBeforeInsertionPoint. We identify the next sibling using a
+      // negative integer indicating the difference between the new node's id and its next
+      // sibling's id.
+      return cursor.nextSiblingId - nodeId
+    }
+    if (cursor.parentId !== undefined) {
+      // Use an AppendChildInsertionPoint. We identify the parent node using a positive
+      // integer indicating the difference between the new node's id and its parent's id.
+      return nodeId - cursor.parentId
+    }
+    // There's no parent. Use a RootInsertionPoint. (i.e., null)
+    return null
+  }
+
+  return {
+    advance(node: Node): { nodeId: NodeId; insertionPoint: InsertionPoint } {
+      const nodeId = nodeIds.getOrInsert(node)
+      const insertionPoint = computeInsertionPoint(nodeId)
+      cursor.previousSiblingId = nodeId
+      return { nodeId, insertionPoint }
+    },
+    ascend(): void {
+      if (cursor.container) {
+        cursor = cursor.container
+      }
+    },
+    descend(): void {
+      if (cursor.previousSiblingId !== undefined) {
+        cursor = {
+          container: cursor,
+          parentId: cursor.previousSiblingId,
+          previousSiblingId: undefined,
+          nextSiblingId: undefined,
+        }
+      }
+    },
+  }
+}

package/src/domain/record/serialization/serialization.types.ts

@@ -1,14 +1,3 @@
-import type { NodePrivacyLevel } from '@kubesense/kubesense-browser-rum-core'
-
-// Those values are the only one that can be used when inheriting privacy levels from parent to
-// children during serialization, since HIDDEN and IGNORE shouldn't serialize their children. This
-// ensures that no children are serialized when they shouldn't.
-export type ParentNodePrivacyLevel =
-  | typeof NodePrivacyLevel.ALLOW
-  | typeof NodePrivacyLevel.MASK
-  | typeof NodePrivacyLevel.MASK_USER_INPUT
-  | typeof NodePrivacyLevel.MASK_UNLESS_ALLOWLISTED
-
 /**
  * Virtual attributes. These attributes appear in the serialized attribute map of
  * elements, but they're not actually derived from the DOM; they're used to represent
@@ -36,8 +25,3 @@ export interface VirtualAttributes {
   /** For HIDDEN elements, the height of the element's bounding client rect. */
   rr_height?: string
 }
-
-export interface SerializeOptions {
-  /** For HIDDEN elements, the height of the element's bounding client rect. */
-  rr_height?: string
-}

package/src/domain/record/serialization/serializationTransaction.ts

@@ -1,82 +1,222 @@
-import { elapsed, timeStampNow } from '@kubesense/kubesense-browser-core'
-
-import type { BrowserRecord } from '../../../types'
-import type { NodeId } from '../nodeIds'
+import { elapsed, timeStampNow } from '@kubesense/kubesense-js-core/time'
+import type { TimeStamp } from '@kubesense/kubesense-js-core/time'
+import { ChangeType, RecordType, SnapshotFormat } from '../../../types'
+import type {
+  AddCDataSectionNodeChange,
+  AddDocTypeNodeChange,
+  AddDocumentFragmentNodeChange,
+  AddDocumentNodeChange,
+  AddElementNodeChange,
+  AddNodeChange,
+  AddShadowRootNodeChange,
+  AddTextNodeChange,
+  AttachedStyleSheetsChange,
+  InputSelectionChange,
+  InputSelectionState,
+  InsertionPoint,
+  MediaInteractionType,
+  RoleAnnotatedStringLiteral,
+} from '../../../types'
+import type {
+  NodeId,
+  RoleAnnotatedAddNodeName,
+  RoleAnnotatedAddNodeParams,
+  RoleAnnotatedAttributeChange,
+  RoleAnnotatedStringLiteralValue,
+  RoleAnnotatedStyleSheetMediaList,
+  RoleAnnotatedStyleSheetRules,
+  StyleSheetId,
+} from '../encoding'
+import { createChangeEncoder } from '../encoding'
 import type { EmitRecordCallback, EmitStatsCallback } from '../record.types'
 import type { RecordingScope } from '../recordingScope'
 import type { SerializationStats } from './serializationStats'
 import { createSerializationStats, updateSerializationStats } from './serializationStats'
 
-export type SerializationTransactionCallback = (transaction: SerializationTransaction) => void
-
 export const enum SerializationKind {
   INITIAL_FULL_SNAPSHOT,
   SUBSEQUENT_FULL_SNAPSHOT,
   INCREMENTAL_SNAPSHOT,
 }
 
+export type SerializationTransactionCallback = (transaction: SerializationTransaction) => void
+
 /**
- * A serialization transaction is used to build and emit a sequence of session replay
- * records containing a serialized snapshot of the DOM.
+ * SerializationTransaction is used to build and emit a `BrowserChangeRecord` containing a
+ * serialized snapshot of the DOM. The term "transaction" is used because all the changes
+ * in a serialization transaction are applied together, atomically. A serialization
+ * transaction is thus always associated with a single timestamp.
+ *
+ * To use `SerializationTransaction`, call the builder methods it exposes to add changes
+ * to the transaction. At the end of the transaction, the changes will be combined into a
+ * single `BrowserChangeRecord` and emitted.
  */
 export interface SerializationTransaction {
-  /** Add a record to the transaction. It will be emitted when the transaction ends. */
-  add(record: BrowserRecord): void
-
   /**
    * Add a metric to the transaction's statistics. The aggregated statistics will be
    * emitted when the transaction ends.
    */
   addMetric(metric: keyof SerializationStats, value: number): void
 
+  /** Add a node to the document at the given insertion point. */
+  addNode(
+    pos: InsertionPoint,
+    nodeName: RoleAnnotatedAddNodeName<AddCDataSectionNodeChange>,
+    ...params: RoleAnnotatedAddNodeParams<AddCDataSectionNodeChange>
+  ): void
+  addNode(
+    pos: InsertionPoint,
+    nodeName: RoleAnnotatedAddNodeName<AddDocTypeNodeChange>,
+    ...params: RoleAnnotatedAddNodeParams<AddDocTypeNodeChange>
+  ): void
+  addNode(
+    pos: InsertionPoint,
+    nodeName: RoleAnnotatedAddNodeName<AddDocumentNodeChange>,
+    ...params: RoleAnnotatedAddNodeParams<AddDocumentNodeChange>
+  ): void
+  addNode(
+    pos: InsertionPoint,
+    nodeName: RoleAnnotatedAddNodeName<AddDocumentFragmentNodeChange>,
+    ...params: RoleAnnotatedAddNodeParams<AddDocumentFragmentNodeChange>
+  ): void
+  addNode(
+    pos: InsertionPoint,
+    nodeName: RoleAnnotatedAddNodeName<AddShadowRootNodeChange>,
+    ...params: RoleAnnotatedAddNodeParams<AddShadowRootNodeChange>
+  ): void
+  addNode(
+    pos: InsertionPoint,
+    nodeName: RoleAnnotatedAddNodeName<AddTextNodeChange>,
+    ...params: RoleAnnotatedAddNodeParams<AddTextNodeChange>
+  ): void
+  addNode<Name extends RoleAnnotatedAddNodeName<AddElementNodeChange>>(
+    pos: InsertionPoint,
+    nodeName: Name,
+    // This overload is deliberately unsatisfiable; a '#'-prefixed name belongs to one of
+    // the node kinds above, so we should never reach it unless the caller provided
+    // invalid parameters.
+    ...params: RoleAnnotatedStringLiteralValue<Name> extends `#${string}`
+      ? [never]
+      : RoleAnnotatedAddNodeParams<AddElementNodeChange>
+  ): void
+
+  /** Add a stylesheet to the document. */
+  addStyleSheet(
+    rules: RoleAnnotatedStyleSheetRules,
+    mediaList?: RoleAnnotatedStyleSheetMediaList,
+    disabled?: boolean
+  ): void
+
   /**
-   * Assign and return an id to the given node. If the node has previously been assigned
-   * an id, the existing id will be reused.
+   * Attach one or more stylesheets to a <link>, <style>, #document, #document-fragment,
+   * or #shadow-root node.
    */
-  assignId(node: Node): NodeId
+  attachStyleSheets(nodeId: NodeId, sheetIds: StyleSheetId[]): void
+
+  /** Remove a node from the document. */
+  removeNode(nodeId: NodeId): void
+
+  /** Set a node's attributes to the given values. */
+  setAttributes(change: RoleAnnotatedAttributeChange): void
+
+  /** Set the content of a canvas node to the given resource ID. */
+  setImageContent(nodeId: NodeId, resourceId: RoleAnnotatedStringLiteral): void
+
+  /** Set the selection state of one or more checkboxes, radio buttons, or <option> elements. */
+  setInputSelection(state: InputSelectionState, nodeIds: NodeId[]): void
+
+  /** Set the value of a form element. */
+  setInputValue(nodeId: NodeId, value: RoleAnnotatedStringLiteral): void
+
+  /** Set the media playback state of an <audio> or <video> element. */
+  setMediaPlaybackState(nodeId: NodeId, state: MediaInteractionType): void
+
+  /** Set the given node's scroll position in CSS pixels. */
+  setScrollPosition(nodeId: NodeId, x: number, y: number): void
+
+  /** Set the given node's size in CSS pixels. */
+  setSize(nodeId: NodeId, width: number, height: number): void
+
+  /** Set the given node's text content. */
+  setText(nodeId: NodeId, content: RoleAnnotatedStringLiteral): void
 
   /** The kind of serialization being performed in this transaction. */
   kind: SerializationKind
 
-  /**
-   * A set used to track nodes which have been serialized in the current transaction. If
-   * undefined, this feature is disabled; this is the default state in new transactions
-   * for performance reasons. Set the property to a non-undefined value if you need this
-   * capability.
-   */
-  serializedNodeIds?: Set<NodeId>
-
   /** The recording scope in which this transaction is occurring. */
   scope: RecordingScope
 }
 
-/**
- * Perform serialization within a transaction. At the end of the transaction, the
- * generated records and statistics will be emitted.
- */
 export function serializeInTransaction(
   kind: SerializationKind,
   emitRecord: EmitRecordCallback,
   emitStats: EmitStatsCallback,
   scope: RecordingScope,
+  timestamp: TimeStamp,
   serialize: SerializationTransactionCallback
 ): void {
-  const records: BrowserRecord[] = []
+  const encoder = createChangeEncoder(scope.stringIds)
   const stats = createSerializationStats()
 
   const transaction: SerializationTransaction = {
-    add(record: BrowserRecord): void {
-      records.push(record)
-    },
     addMetric(metric: keyof SerializationStats, value: number): void {
       updateSerializationStats(stats, metric, value)
     },
-    assignId(node: Node): NodeId {
-      const id = scope.nodeIds.assign(node)
-      if (transaction.serializedNodeIds) {
-        transaction.serializedNodeIds.add(id)
+    // The overloads declared above are what callers are checked against; this implementation
+    // takes the parameters of any of them.
+    addNode(...change: unknown[]): void {
+      encoder.add(ChangeType.AddNode, change as AddNodeChange)
+    },
+    addStyleSheet(
+      rules: RoleAnnotatedStyleSheetRules,
+      mediaList?: RoleAnnotatedStyleSheetMediaList,
+      disabled?: boolean
+    ): void {
+      if (disabled) {
+        encoder.add(ChangeType.AddStyleSheet, [rules, mediaList || [], disabled])
+      } else if (mediaList) {
+        encoder.add(ChangeType.AddStyleSheet, [rules, mediaList])
+      } else {
+        encoder.add(ChangeType.AddStyleSheet, [rules])
+      }
+    },
+    attachStyleSheets(nodeId: NodeId, sheetIds: StyleSheetId[]): void {
+      const change: AttachedStyleSheetsChange = [nodeId]
+      for (const sheetId of sheetIds) {
+        change.push(sheetId)
+      }
+      encoder.add(ChangeType.AttachedStyleSheets, change)
+    },
+    removeNode(nodeId: NodeId): void {
+      encoder.add(ChangeType.RemoveNode, nodeId)
+    },
+    setAttributes(change: RoleAnnotatedAttributeChange): void {
+      encoder.add(ChangeType.Attribute, change)
+    },
+    setInputSelection(state: InputSelectionState, nodeIds: NodeId[]): void {
+      const change: InputSelectionChange = [state]
+      for (const nodeId of nodeIds) {
+        change.push(nodeId)
       }
-      return id
+      encoder.add(ChangeType.InputSelection, change)
+    },
+    setInputValue(nodeId: NodeId, value: RoleAnnotatedStringLiteral): void {
+      encoder.add(ChangeType.InputValue, [nodeId, value])
+    },
+    setMediaPlaybackState(nodeId: NodeId, state: MediaInteractionType): void {
+      encoder.add(ChangeType.MediaPlaybackState, [nodeId, state])
+    },
+    setScrollPosition(nodeId: NodeId, x: number, y: number): void {
+      encoder.add(ChangeType.ScrollPosition, [nodeId, x, y])
+    },
+    setSize(nodeId: NodeId, width: number, height: number): void {
+      encoder.add(ChangeType.Size, [nodeId, width, height])
+    },
+    setText(nodeId: NodeId, content: RoleAnnotatedStringLiteral): void {
+      encoder.add(ChangeType.Text, [nodeId, content])
+    },
+    setImageContent(nodeId: NodeId, resourceId: RoleAnnotatedStringLiteral): void {
+      encoder.add(ChangeType.ImageContent, [nodeId, resourceId])
     },
     kind,
     scope,
@@ -86,8 +226,22 @@ export function serializeInTransaction(
   serialize(transaction)
   updateSerializationStats(stats, 'serializationDuration', elapsed(start, timeStampNow()))
 
-  for (const record of records) {
-    emitRecord(record)
+  const changes = encoder.flush()
+  if (changes.length > 0) {
+    if (kind === SerializationKind.INITIAL_FULL_SNAPSHOT || kind === SerializationKind.SUBSEQUENT_FULL_SNAPSHOT) {
+      emitRecord({
+        data: changes,
+        format: SnapshotFormat.Change,
+        type: RecordType.FullSnapshot,
+        timestamp,
+      })
+    } else {
+      emitRecord({
+        data: changes,
+        type: RecordType.Change,
+        timestamp,
+      })
+    }
   }
 
   emitStats(stats)

package/src/domain/record/serialization/serializationUtils.ts

@@ -1,4 +1,4 @@
-import { buildUrl } from '@kubesense/kubesense-browser-core'
+import { buildUrl } from '@kubesense/kubesense-js-core/util'
 import { CENSORED_STRING_MARK, shouldMaskNode } from '@kubesense/kubesense-browser-rum-core'
 import type { NodePrivacyLevel } from '@kubesense/kubesense-browser-rum-core'
 
@@ -76,20 +76,6 @@ function makeUrlAbsolute(url: string, baseUrl: string): string {
   }
 }
 
-const TAG_NAME_REGEX = /[^a-z1-6-_]/
-export function getValidTagName(tagName: string): string {
-  const processedTagName = tagName.toLowerCase().trim()
-
-  if (TAG_NAME_REGEX.test(processedTagName)) {
-    // if the tag name is odd and we cannot extract
-    // anything from the string, then we return a
-    // generic div
-    return 'div'
-  }
-
-  return processedTagName
-}
-
 /**
  * Returns the tag name of the given element, normalized to ensure a consistent lowercase
  * representation regardless of whether the element is HTML, XHTML, or SVG.

package/src/domain/record/serialization/serializeAttributes.ts

@@ -1,41 +1,32 @@
 import { NodePrivacyLevel, shouldMaskNode } from '@kubesense/kubesense-browser-rum-core'
 import { isSafari } from '@kubesense/kubesense-browser-core'
+import type { RoleAnnotatedAttributeAssignment } from '../encoding'
+import { createAttributeAssignment } from '../encoding'
 import { getElementInputValue, normalizedTagName, switchToAbsoluteUrl } from './serializationUtils'
 import { serializeAttribute } from './serializeAttribute'
 import type { SerializationTransaction } from './serializationTransaction'
 import { SerializationKind } from './serializationTransaction'
 import type { VirtualAttributes } from './serialization.types'
 
-export function serializeAttributes(
-  element: Element,
-  nodePrivacyLevel: NodePrivacyLevel,
-  transaction: SerializationTransaction
-): Record<string, number | string> {
-  return {
-    ...serializeDOMAttributes(element, nodePrivacyLevel, transaction),
-    ...serializeVirtualAttributes(element, nodePrivacyLevel, transaction),
-  }
-}
-
 export function serializeDOMAttributes(
   element: Element,
   nodePrivacyLevel: NodePrivacyLevel,
   transaction: SerializationTransaction
-): Record<string, string> {
+): RoleAnnotatedAttributeAssignment[] {
   if (nodePrivacyLevel === NodePrivacyLevel.HIDDEN) {
-    return {}
+    return []
   }
 
-  const attrs: Record<string, string> = {}
+  const attributes: RoleAnnotatedAttributeAssignment[] = []
   const tagName = normalizedTagName(element)
 
   for (let i = 0; i < element.attributes.length; i += 1) {
     const attribute = element.attributes.item(i)!
     const attributeName = attribute.name
-    const attributeValue = serializeAttribute(element, nodePrivacyLevel, attributeName, transaction.scope.configuration)
-    if (attributeValue !== null) {
-      attrs[attributeName] = attributeValue
+    if (attributeName === 'value' || attributeName === 'selected' || attributeName === 'checked') {
+      continue // Handled specially below.
     }
+    serializeDOMAttributeInto(attributes, element, tagName, attributeName, nodePrivacyLevel, transaction)
   }
 
   if (
@@ -44,20 +35,21 @@ export function serializeDOMAttributes(
   ) {
     const formValue = getElementInputValue(element, nodePrivacyLevel)
     if (formValue !== undefined) {
-      attrs.value = formValue
+      attributes.push(createAttributeAssignment(tagName, 'value', formValue))
     }
+  } else if (element.hasAttribute('value')) {
+    serializeDOMAttributeInto(attributes, element, tagName, 'value', nodePrivacyLevel, transaction)
   }
 
   /**
    * <Option> can be selected, which occurs if its `value` matches ancestor `<Select>.value`
    */
   if (tagName === 'option') {
-    const optionElement = element as HTMLOptionElement
-    if (optionElement.selected && !shouldMaskNode(optionElement, nodePrivacyLevel)) {
-      attrs.selected = ''
-    } else {
-      delete attrs.selected
+    if ((element as HTMLOptionElement).selected && !shouldMaskNode(element, nodePrivacyLevel)) {
+      attributes.push(createAttributeAssignment(tagName, 'selected', ''))
     }
+  } else if (element.hasAttribute('selected')) {
+    serializeDOMAttributeInto(attributes, element, tagName, 'selected', nodePrivacyLevel, transaction)
   }
 
   /**
@@ -70,14 +62,28 @@ export function serializeDOMAttributes(
    */
   const inputElement = element as HTMLInputElement
   if (tagName === 'input' && (inputElement.type === 'radio' || inputElement.type === 'checkbox')) {
-    if (inputElement.checked && !shouldMaskNode(inputElement, nodePrivacyLevel)) {
-      attrs.checked = ''
-    } else {
-      delete attrs.checked
+    if (inputElement.checked && !shouldMaskNode(element, nodePrivacyLevel)) {
+      attributes.push(createAttributeAssignment(tagName, 'checked', ''))
     }
+  } else if (element.hasAttribute('checked')) {
+    serializeDOMAttributeInto(attributes, element, tagName, 'checked', nodePrivacyLevel, transaction)
   }
 
-  return attrs
+  return attributes
+}
+
+function serializeDOMAttributeInto(
+  attributes: RoleAnnotatedAttributeAssignment[],
+  element: Element,
+  tagName: string,
+  attributeName: string,
+  nodePrivacyLevel: NodePrivacyLevel,
+  transaction: SerializationTransaction
+): void {
+  const attributeValue = serializeAttribute(element, nodePrivacyLevel, attributeName, transaction.scope.configuration)
+  if (attributeValue !== null) {
+    attributes.push(createAttributeAssignment(tagName, attributeName, attributeValue))
+  }
 }
 
 export function serializeVirtualAttributes(
@@ -90,14 +96,12 @@ export function serializeVirtualAttributes(
   }
 
   const attrs: VirtualAttributes = {}
-  const doc = element.ownerDocument
   const tagName = normalizedTagName(element)
 
   // remote css
   if (tagName === 'link') {
-    const stylesheet = Array.from(doc.styleSheets).find((s) => s.href === (element as HTMLLinkElement).href)
-    const cssText = getCssRulesString(stylesheet)
-    if (cssText && stylesheet) {
+    const cssText = getCssRulesString((element as HTMLLinkElement).sheet)
+    if (cssText) {
       transaction.addMetric('cssText', cssText.length)
       attrs._cssText = cssText
     }