The custom highlight API provides a way for web developers to style the text of arbitrary ranges. 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 selections to represent online collaboration, or spellchecking frameworks.

Motivation

The Custom Highlight API extends the concept of highlight pseudo-elements by providing a way for web developers to style the text of arbitrary ranges, 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. With the lack of this functionality in the browser today, web developers and framework authors are forced to modify the underlying structure of the DOM tree in order to achieve the rendering they desire. This can quickly become complicated in cases where the desired highlight spans elements across multiple subtrees, and also requires DOM updates in order to adjust highlights as they change. The custom highlight API provides a programmatic way of adding and removing highlights that does not affect the underlying DOM structure, but instead applies styles to text based on range objects.

Documentation

Specification

Working draft or equivalent

Status in Chromium

Blink>Editing


Proposed (tracking bug)

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

Owners

Search tags

Custom Highlight API, Highlight API,

Last updated on 2021-02-21