AutoCapture — Shadow DOM POC

Demo of open-mode Shadow DOM support in AutoCapture (SDKW-51 POC). With the shadowDomSupport option on, clicks and changes inside open shadow trees are captured with the true inner element: the event target is resolved through composedPath()[0], the ancestor walk and Element Hierarchy cross shadow boundaries into the host, Element Path becomes a piercing selector (host >>> inner), and observers fan out into open roots. Closed shadow roots stay opaque — events retarget to the host, exactly as before.

Initializing SDK…

1. Light DOM (control)

Baseline — element interactions track these identically with the POC on or off.

Light DOM link

2. Open Shadow DOM

attachShadow({ mode: 'open' }) — interactive elements live inside host.shadowRoot. POC on: clicks emit with the inner element and a >>>-delimited path; typing then blurring the input emits Element Changed (change events don't cross shadow boundaries — the SDK attaches a listener inside the root, discovered from the focus that precedes the change).

3. Closed Shadow DOM (out of scope — contrast)

attachShadow({ mode: 'closed' })host.shadowRoot is null and composedPath() stops at the host. Internals cannot be inspected from page JS; clicks keep retargeting to the host (usually dropped by the allowlist), with no errors.

4. Nested open Shadow DOM (depth 2)

An open shadow root inside another open shadow root. With maxDepth ≥ 2 the path carries two >>> delimiters and the hierarchy crosses both hosts.

5. Late-mounted component

Mounts a new host with an open shadow root after load. Click and change capture work via the document listener + focus-driven discovery; exposure observers attach via the mutation fan-out.

Click debug (document capture listener)

What a document-level listener sees per click: retargeted event.target vs composedPath()[0], and which element each resolution strategy would track. Newest first.

Amplitude events (enrichment plugin)

Events that make it through AutoCapture. With the POC on, shadow clicks/changes appear here with the inner element's tag/text, a piercing Element Path, and a hierarchy that crosses the boundary ("shadow": true marks shadow-tree tops). Newest first.