Function: highlightSelector()

function highlightSelector(
   ctx: Context, 
   selector: string, 
options?: HighlightSelectorOptions): Watcher<ElementHandle<Element>>;

Defined in: src/highlight/highlightSelector.tsx:51

Create a visible highlight around an element.

Parameters

Parameter	Type	Description
ctx	Context	Context object.
selector	string	CSS selector for the element to highlight.
options?	HighlightSelectorOptions	Options for the highlight.

Returns

Watcher<ElementHandle<Element>>

The Watcher instance observing the lifecycle of the element.

Remarks

A highlight is a colored transparent marker that appears around an element. It points users to important data or fields that they should acknowledge, double-check, confirm, or edit. Highlights do not block clicks or other user actions.

The highlight will be applied and removed depending on element existence, and it survives navigation. Optionally, pass ensureVisible to apply the highlight only to visible elements. The highlight is appended to the element's scroll container and will follow scrolling and display with the correct z-index.

The highlight starts automatically. Call stop() to remove it from the DOM.

Example

const highlights = [
  highlightSelector(ctx, '.invoice-total'),
  highlightSelector(ctx, '.due-date'),
];
// Later, remove them
for (const h of highlights) h.stop();