Domotion

CapturedElement

The shape of every node in a captured tree.

The intermediate representation between captureElementTree() and elementTreeToSvg(). A plain serialisable object — JSON-roundtrip safe — so you can cache it, diff it, or transform it before render.

ⓘ

Domotion is at 0.x; new fields are added under styles as new CSS support lands. Treat CapturedElement as open — read what you need, ignore the rest, never assume the field set is exhaustive.

Core fields

interface CapturedElement {
  tag: string;
  text: string;
  x: number;
  y: number;
  width: number;
  height: number;
  styles: CapturedStyles;
  children: CapturedElement[];
  textSegments?: TextSegment[];
  // ...form-control / raster-fallback fields
}
tag
string
Lowercase HTML tag name. "div", "span", "input", etc.
text
string
Concatenated text content, used as a fallback when textSegments isn't available.
x, y
number
Top-left corner relative to the capture viewport, in CSS pixels.
width, height
number
Box dimensions in CSS pixels. Includes border but not margin (matches Chromium's getBoundingClientRect).
styles
CapturedStyles
~80 captured computed-style fields: backgrounds, borders, fonts, decorations, transforms, gradients, etc. See below.
children
CapturedElement[]
Captured descendants in paint order.
textSegments?
TextSegment[]
Per-line / per-styled-run text data with viewport-relative position and per-character x offsets.

The styles object

Domotion captures a curated set of computed styles — enough to faithfully reproduce the element in SVG. Highlights, grouped:

Backgrounds & layout

  • backgroundColor, backgroundImage, backgroundSize, backgroundPosition, backgroundRepeat, backgroundClip, backgroundOrigin, backgroundAttachment.
  • paddingTop/Right/Bottom/Left.
  • opacity, zIndex, position, float.
  • overflowX, overflowY, scrollbarGutter, scroll{Width,Height,Top,Left}, client{Width,Height}.

Borders

  • Per-side: borderTop/Right/Bottom/Left{Width,Style,Color}.
  • Per-corner: borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius.
  • Border-image: borderImageSource, borderImageSlice, borderImageWidth, borderImageOutset, borderImageRepeat.

Text & decorations

  • color, fontFamily, fontSize, fontWeight, fontStyle, letterSpacing, textAlign, textDecoration*.

Transform / filters / masks

  • filter, backdropFilter, mixBlendMode.
  • clipPath, mask, maskImage, maskMode, maskSize, maskPosition, maskRepeat, maskComposite.

Form controls

  • inputType, checked, indeterminate, disabled.
  • progressValue, progressMax, plus author-styled pseudo overrides (progressBarBg, progressBarRadius, etc.).

TextSegment

interface TextSegment {
  text: string;
  x: number; y: number;
  width: number; height: number;
  xOffsets?: number[];
  color?: string;
  fontSize?: number;
  fontWeight?: string;
  rasterRect?: { x; y; width; height };
  rasterDataUri?: string;
  rasterGlyphs?: { charIndex; rect; dataUri? }[];
}

The key field is xOffsets: an array of viewport-relative x positions, one per visible character. Renderers anchor each glyph at xOffsets[i] rather than summing fontkit advances, so captured text matches Chromium's sub-pixel positioning. See Text rendering.

Raster fall-back fields

When a region can't be expressed as SVG primitives, the capture script records a clip rect and the post-capture rasteriser fills in a base64 PNG data URI:

  • Element-level: elementRaster on the element (e.g. textarea content too involved to word-wrap).
  • Segment-level: rasterRect + rasterDataUri on a text segment whose entire content is a color-bitmap run.
  • Per-character: rasterGlyphs for emoji / color-bitmap codepoints mixed into otherwise path-rendered text.

See also