Highlight

Text match highlighting component: computes matched segments from text (the source string) plus highlight (keywords — space-separated words or a JSON array) and renders each hit as a <mark> (colors come from theme tokens, adapting to dark mode automatically). Three toggles are supported — case sensitivity, whole-word matching, and accent sensitivity (all off by default; accent folding strips combining marks via String.normalize('NFD')). After each content recomputation it dispatches oas-count (detail { count, matches }).

Basic Usage

Single keyword highlight

Example

Multiple Keywords

Separate keywords with spaces, or pass a JSON array (e.g. '["fox","dog"]'). Overlapping hit ranges are merged automatically — no nested <mark> is ever produced.

Space-separated words

Example

JSON array

Example

Case / Whole-Word / Accent

All three toggles default to off (insensitive); boolean attributes apply when present.

case-sensitive

Example

whole-word

Example

accent-sensitive (é ↔ e folding by default)

Example

whole-word boundaries are decided by Unicode letters/digits/underscores (han characters included): a hit adjacent to a word character is not a whole word, so a Chinese keyword surrounded by han characters does not match (Chinese has no space-based word boundaries — a conservative, correct default).

Match Count (oas-count)

Dispatched after each content recomputation triggered by attribute changes, with detail { count, matches }: count is the number of rendered <mark> segments (including 0), and matches is the deduplicated list of keywords that actually hit. The demo below switches keyword sets via buttons and the feedback text updates live (the first dispatch during the mount frame happens before a manual addEventListener can register — the same synchronous-dispatch semantics as native DOM events; framework event bindings are unaffected).

oas-count event feedback

Keywords: components reusedKeywords: frameworks platformKeywords: none

Example

Empty State & Safety

• With no text, no highlight, or zero hits: the source text renders as-is (or nothing renders) with zero <mark>; oas-count still dispatches count: 0 so hosts can show a "no results" state.
• When highlight starts with [ it is parsed as a JSON array; on parse failure or a non-array value it falls back to whitespace-separated words; empty strings and non-string entries are filtered out.
• Source text and keywords always render as plain text (DOM textContent channel); HTML fragments are never parsed or executed.

Font Size & Inline Flow

The host is an inline box (display: inline) and flows naturally inside paragraph text; font size and line height inherit from the surrounding typography context.

API

oas-highlight

Attributes

Attribute	Description	Type	Default
accent-sensitive	Accent sensitive (accents NFD-folded by default)	boolean	—
case-sensitive	Case sensitive (insensitive by default)	boolean	—
highlight	Keywords: space-separated words or JSON array; whitespace fallback on parse failure	—	—
text	Source text	—	—
whole-word	Whole-word matching (off by default; Unicode letter/digit boundaries)	boolean	—

Events

Event	Description
oas-count	Dispatched after each recompute, detail: { count, matches }

CSS Variables

CSS Variable	Default
--oas-highlight-bg	color-mix(in srgb, var(--oas-preset-gold) 22%, transparent)
--oas-highlight-color	var(--oas-color-text-primary)

Parts

Part	Description
highlight	Hit segment (mark)
root	Content container