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 namedHighlight
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
Specification |
---|
CSS Custom Highlight API Module Level 1 # highlight-registry |
Browser compatibility
BCD tables only load in the browser