W3cubDocs

/Web APIs

HighlightRegistry

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

The HighlightRegistry interface of the CSS Custom Highlight API is used to register Highlight objects to be styled using the API. It is accessed via CSS.highlights.

A HighlightRegistry instance is a Map-like object, in which each key is the name string for a custom highlight, and the corresponding value is the associated Highlight object.

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

html

<p id="foo">CSS Custom Highlight API</p>

CSS

css

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

JavaScript

js

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

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
@@iterator 105 105 preview No 91 No 105 105 No 72 No 20.0
HighlightRegistry 105 105 preview No 91 No 105 105 No 72 No 20.0
clear 105 105 preview No 91 No 105 105 No 72 No 20.0
delete 105 105 preview No 91 No 105 105 No 72 No 20.0
entries 105 105 preview No 91 No 105 105 No 72 No 20.0
forEach 105 105 preview No 91 No 105 105 No 72 No 20.0
get 105 105 preview No 91 No 105 105 No 72 No 20.0
has 105 105 preview No 91 No 105 105 No 72 No 20.0
keys 105 105 preview No 91 No 105 105 No 72 No 20.0
set 105 105 preview No 91 No 105 105 No 72 No 20.0
size 105 105 preview No 91 No 105 105 No 72 No 20.0
values 105 105 preview No 91 No 105 105 No 72 No 20.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HighlightRegistry