The highlight component provides efficient searching and highlighting of text projected into it via its default slot. It uses the native CSS Custom Highlight API to apply highlight styles to matched text nodes without modifying the DOM.

The component supports case-sensitive matching, programmatic navigation between matches, and automatic scroll-into-view of the active match.
Element
igc-highlight
Slots
default — The default slot. Place the text content you want to search and highlight here.

Example

Basic usage — wrap your text and set the search-text attribute:

<igc-highlight search-text="world">
  <p>Hello, world! The world is a wonderful place.</p>
</igc-highlight>

Constructors

Section titled "Constructors"

IgcHighlightComponent 

new IgcHighlightComponent(): IgcHighlightComponent

Defined in src/components/highlight/highlight.ts:140

Returns IgcHighlightComponent

Properties

Section titled "Properties"

styles

Section titled "styles"

Array of styles to apply to the element. The styles should be defined using the css tag function, via constructible stylesheets, or imported from native CSS module scripts.

Note on Content Security Policy:

Element styles are implemented with <style> tags when the browser doesn't support adopted StyleSheets. To use such <style> tags with the style-src CSP directive, the style-src value must either include 'unsafe-inline' or nonce-<base64-value> with <base64-value> replaced be a server-generated nonce.

To provide a nonce to use on generated <style> elements, set window.litNonce to a server-generated nonce in your page's HTML, before loading application code:

``

 
styles: CSSResult[]

Defined in src/components/highlight/highlight.ts:76

tagName

Section titled "tagName" 
tagName: "igc-highlight" = 'igc-highlight'

Defined in src/components/highlight/highlight.ts:75

Accessors

Section titled "Accessors"

caseSensitive

Section titled "caseSensitive" 
get caseSensitive(): boolean

Defined in src/components/highlight/highlight.ts:107

Returns boolean

Whether to match the searched text with case sensitivity in mind. When true, only exact-case occurrences of searchText are highlighted.

 
set caseSensitive(value: boolean): void

Defined in src/components/highlight/highlight.ts:102

Parameters

  • value: boolean

Returns void

current

Section titled "current"

The zero-based index of the currently active (focused) match. Returns 0 when there are no matches.

 
get current(): number

Defined in src/components/highlight/highlight.ts:134

Returns number

searchText

Section titled "searchText" 
get searchText(): string

Defined in src/components/highlight/highlight.ts:124

Returns string

The string to search and highlight in the DOM content of the component. Setting this property triggers a new search automatically. An empty string clears all highlights.

 
set searchText(value: string): void

Defined in src/components/highlight/highlight.ts:119

Parameters

  • value: string

Returns void

size

Section titled "size"

The total number of matches found for the current searchText. Returns 0 when there are no matches or searchText is empty.

 
get size(): number

Defined in src/components/highlight/highlight.ts:129

Returns number

Methods

Section titled "Methods"

next

Section titled "next"

Moves the active highlight to the next match. Wraps around to the first match after the last one.

 
next(options: HighlightNavigation): void

Defined in src/components/highlight/highlight.ts:164

Parameters

  • options: HighlightNavigation

    Optional navigation options (e.g. preventScroll).

Returns void

previous

Section titled "previous"

Moves the active highlight to the previous match. Wraps around to the last match when going back from the first one.

 
previous(options: HighlightNavigation): void

Defined in src/components/highlight/highlight.ts:174

Parameters

  • options: HighlightNavigation

    Optional navigation options (e.g. preventScroll).

Returns void

Section titled "search"

Re-runs the highlight search based on the current searchText and caseSensitive values.

Call this method after the slotted content changes dynamically (e.g. after lazy loading or programmatic DOM mutations) to ensure all matches are up to date.

 
search(): void

Defined in src/components/highlight/highlight.ts:194

Returns void

setActive

Section titled "setActive"

Moves the active highlight to the match at the specified zero-based index.

 
setActive(index: number, options: HighlightNavigation): void

Defined in src/components/highlight/highlight.ts:184

Parameters

  • index: number

    The zero-based index of the match to activate.
  • options: HighlightNavigation

    Optional navigation options (e.g. preventScroll).

Returns void

register

Section titled "register" 
register(): void

Defined in src/components/highlight/highlight.ts:79

Returns void