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

Specification link


Specification currently under development in a Working Group

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

Intent to Prototype url

Intent to Prototype thread

Comments

Highlight API does not yet support all of the pseudos at https://www.w3.org/TR/css-pseudo-4/#highlight-styling -- the current implementation only supports color and background-color. However, we believe there is value in shipping starting with just these styles, since they are sufficient to support key scenarios like custom find-on-page.

Search tags

Custom Highlight API, Highlight API,

Last updated on 2021-11-26