Custom Highlight API

The Custom Highlight API extends the concept of highlight pseudo-elements by providing a way for web developers to style the text of arbitrary Range objects, rather than being limited to the user agent defined ::selection, ::inactive-selection, ::spelling-error, and ::grammar-error. This is useful in a variety of scenarios, including editing frameworks that wish to implement their own selection, find-on-page over virtualized documents, multiple selection to represent online collaboration, or spellchecking frameworks.

Read the specification for more details.

Demo

Try searching for text using the search field at the top of this page. The matching text will be highlighted.

The Custom Highlight API relies on the ::highlight(name) pseudo-element, which can be used to assigned highlighting styles to custom highlighted ranges created with the CSS.highlights JavaScript API.

Demo source code