sdk.highlight.highlightselector

Home > @matterway/sdk > Highlight > highlightSelector

Highlight.highlightSelector() function

Creates a visible highlight around an element by CSS selector.

Signature:

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

Parameters

Parameter	Type	Description
ctx	Context	Context object.
selector	string	A CSS selector pointing to the element to overlay with a highlight.
options	HighlightSelectorOptions	(Optional) 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 point 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 will be started automaticaly, and it can be removed from the DOM by calling stop().

Example

const highlights = [
  highlightSelector(ctx, '.mySelector'),
  highlightSelector(ctx, '.myOtherSelector'),
];
// ...
for (let h of highlights) h.stop();