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.
- Slots
-
default— The default slot. Place the text content you want to search and highlight here.
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: booleansearchText
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: stringAccessors
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(): numberReturns number
The total number of matches found for the current searchText. Returns 0 when there are no matches or searchText is empty.
get size(): numberReturns number
Methods
Section titled "Methods"Moves the active highlight to the next match. Wraps around to the first match after the last one.
next(options: HighlightNavigation): voidParameters
- options:
HighlightNavigationOptional 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): voidParameters
- options:
HighlightNavigationOptional navigation options (e.g.
preventScroll).
Returns void
search
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(): voidReturns void
setActive
Section titled "setActive"Moves the active highlight to the match at the specified zero-based index.
setActive(index: number, options: HighlightNavigation): voidParameters
- index:
numberThe zero-based index of the match to activate.
- options:
HighlightNavigationOptional navigation options (e.g.
preventScroll).