HighlightRegistry

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The HighlightRegistry interface, accessed via CSS.highlights, is a Map-like object used to register Highlight objects to be styled using the CSS Custom Highlight API.

Instance properties

The HighlightRegistry interface doesn't inherit any properties.

HighlightRegistry.size Read only Experimental: Returns the number of Highlight objects currently registered.

Instance methods

The HighlightRegistry interface doesn't inherit any methods.

HighlightRegistry.clear() Experimental: Remove all Highlight objects from the registry.
HighlightRegistry.delete() Experimental: Remove the named Highlight object from the registry.
HighlightRegistry.entries() Experimental: Returns a new iterator object that contains each Highlight object in the registry, in insertion order.
HighlightRegistry.forEach() Experimental: Calls the given callback once for each Highlight object in the registry, in insertion order.
HighlightRegistry.get() Experimental: Gets the named Highlight object from the registry.
HighlightRegistry.has() Experimental: Returns a boolean asserting whether a Highlight object is present the registry or not.
HighlightRegistry.keys() Experimental: An alias for HighlightRegistry.values().
HighlightRegistry.set() Experimental: Adds the given Highlight object to the registry with the given name, or updates the named Highlight object, if it already exists in the registry.
HighlightRegistry.values() Experimental: Returns a new iterator object that yields the Highlight objects in the registry, in insertion order.

Examples

Registering a highlight

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

HTML

<p id="foo">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

Specification
CSS Custom Highlight API Module Level 1 # highlight-registry

Browser compatibility

BCD tables only load in the browser