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>

Properties

Section titled "Properties"

caseSensitive

Section titled "caseSensitive"

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

 
caseSensitive: boolean = false

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

searchText

Section titled "searchText"

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.

 
searchText: string = ''

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

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:80

Accessors

Section titled "Accessors"

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:131

Returns number

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:126

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:161

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:171

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:191

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:181

Parameters

  • index: number

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

    Optional navigation options (e.g. preventScroll).

Returns void