Highlight: Highlight() constructor
Baseline
2025
Newly available
Since June 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
The Highlight() constructor returns a newly created
Highlight object which can hold a collection of AbstractRange objects to be styled using the CSS Custom Highlight API.
Syntax
js
new Highlight()
new Highlight(range)
new Highlight(range1, range2, /* …, */ rangeN)
Parameters
range1, …,rangeNOptional-
One or more initial
AbstractRangeobjects to add in the new highlight.
Return value
A new Highlight object.
Examples
The example code below demonstrates how to create an empty highlight object, and then add ranges to it:
js
const highlight = new Highlight();
highlight.add(range1);
highlight.add(range2);
The example code below demonstrates how to create a new highlight object and add ranges to it during instantiation:
js
const highlight = new Highlight(range1, range2);
Specifications
| Specification |
|---|
| CSS Custom Highlight API Module Level 1 # dom-highlight-highlight |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
Highlight() constructor
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support