TheHighlight interface of theCSS Custom Highlight API is used to represent a collection ofRange instances to be styled using the API.

To style arbitrary ranges in a page, instantiate a newHighlight object, add one or moreRange objects to it, and register it using theHighlightRegistry.

AHighlight instance is aSet-like object that can hold one or moreRange objects.

Constructor

Highlight()

Returns a newly createdHighlight object.

Instance properties

TheHighlight interface doesn't inherit any properties.

Highlight.priority

A number that indicates the priority of thisHighlight object. When multiple highlights overlap, the browser uses this priority to decide how to style the overlapping parts.

Highlight.sizeRead only

Returns the number of ranges in theHighlight object.

Highlight.type

An enumeratedString used to specify the semantic meaning of the highlight. This allows assistive technologies to include this meaning when exposing the highlight to users.

Instance methods

TheHighlight interface doesn't inherit any methods.

Highlight.add()

Add a new range to this highlight.

Highlight.clear()

Remove all ranges from this highlight.

Highlight.delete()

Remove a range from this highlight.

Highlight.entries()

Returns a new iterator object that contains each range in the highlight object, in insertion order.

Highlight.forEach()

Calls the given callback once for each range in the highlight object, in insertion order.

Highlight.has()

Returns a boolean asserting whether a range is present the highlight object or not.

Highlight.keys()

An alias forHighlight.values().

Highlight.values()

Returns a new iterator object that yields the ranges in the highlight object in insertion order.

Examples

The following example demonstrates how specific parts of a block of text can be highlighted.

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem  sapiente non eum facere? Nam rem hic culpa, ipsa rerum ab itaque consectetur  molestiae dolores vitae! Quo ex explicabo tempore? Tenetur.</p>

This JavaScript code createsranges, instantiates a newHighlight object for them, andregisters it to be styled on the page:

const parentNode = document.querySelector(".foo");const textNode = parentNode.firstChild;// Create a couple of ranges.const range1 = new Range();range1.setStart(textNode, 6);range1.setEnd(textNode, 21);const range2 = new Range();range2.setStart(textNode, 57);range2.setEnd(textNode, 71);// Create a custom highlight for these ranges.const highlight = new Highlight(range1, range2);// Register the ranges in the HighlightRegistry.CSS.highlights.set("my-custom-highlight", highlight);

The following CSS code snippet demonstrates how to style the registered custom highlight by using the::highlight pseudo-element:

::highlight(my-custom-highlight) {  background-color: peachpuff;}

Result

Specifications

Browser compatibility

See also

• The CSS Custom Highlight API
• CSS custom highlight API module
• CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web