TheHighlightRegistry interface of theCSS Custom Highlight API is used to registerHighlight objects to be styled using the API.It is accessed viaCSS.highlights.

AHighlightRegistry instance is aMap-like object, in which each key is the name string for a custom highlight, and the corresponding value is the associatedHighlight object.

Instance properties

TheHighlightRegistry interface doesn't inherit any properties.

HighlightRegistry.sizeRead only

Returns the number ofHighlight objects currently registered.

Instance methods

TheHighlightRegistry interface doesn't inherit any methods.

HighlightRegistry.clear()

Remove allHighlight objects from the registry.

HighlightRegistry.delete()

Remove the namedHighlight object from the registry.

HighlightRegistry.entries()

Returns a new iterator object that contains eachHighlight object in the registry, in insertion order.

HighlightRegistry.forEach()

Calls the given callback once for eachHighlight object in the registry, in insertion order.

HighlightRegistry.get()

Gets the namedHighlight object from the registry.

HighlightRegistry.has()

Returns a boolean asserting whether aHighlight object is present the registry or not.

HighlightRegistry.highlightsFromPoint()Experimental

Returns an array of objects representing the custom highlights applied at a specific point within the viewport.

HighlightRegistry.keys()

An alias forHighlightRegistry.values().

HighlightRegistry.set()

Adds the givenHighlight object to the registry with the given name, or updates the namedHighlight object, if it already exists in the registry.

HighlightRegistry.values()

Returns a new iterator object that yields theHighlight objects in the registry, in insertion order.

Examples

Registering a highlight

The following example demonstrates how to create ranges, instantiate a newHighlight object for them, and register the highlight using theHighlightRegistry, to style it on the page:

HTML

<p>CSS Custom Highlight API</p>

CSS

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

JavaScript

const text = document.getElementById("foo").firstChild;if (!CSS.highlights) {  text.textContent =    "The CSS Custom Highlight API is not supported in this browser!";}// Create a couple of ranges.const range1 = new Range();range1.setStart(text, 0);range1.setEnd(text, 3);const range2 = new Range();range2.setStart(text, 21);range2.setEnd(text, 24);// 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);

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