CSS custom highlight API

To enable styling text ranges on a webpage using the CSS Custom Highlight API, you create a Range object, then a Highlight object for the range. After registering the highlight using the HighlightRegistry.set() method, you can then select the range using the ::highlight() pseudo-element. The name defined in the set() method is used as the parameter of the ::highlight() pseudo-element selector to select that range.The range selected by the ::highlight() pseudo-element can be styled using a limited number of properties.

<h1>Directions</h1>
<h2>Lincoln Memorial to Martin Luther King, Jr. Memorial</h2>
<ol><li>Head south on Lincoln Memorial Circle</li
  ><li>Turn right toward Independence Ave</li
  ><li>Turn left onto Independence Ave</li
  ><li>Turn right onto West Basin Dr</li
  ><li>Look up when you reach 64 Independence Ave!</li>
</ol>
<hr />
<label
  >Number of steps completed:
  <input type="number" min="0" max="5" value="0" id="currentStep" />
</label>

This example uses the text-decoration property to strike through the steps highlight range defined by our JavaScript:

::highlight(steps) {
  text-decoration: line-through;
  color: blue;
}

We create a Range with a start and end node (which is the same node in this case). We then set this range as the Highlight using the set() method of the CSS HighlightRegistry interface.

const rangeToHighlight = new Range();
const list = document.querySelector("ol");
rangeToHighlight.setStart(list, 0);
rangeToHighlight.setEnd(list, 0);

CSS.highlights.set("steps", new Highlight(rangeToHighlight));

An event listener updates the end of the highlighted range when the number of completed steps changes:

const currentPositionSlider = document.querySelector("input");
currentPositionSlider.addEventListener("change", (e) => {
  rangeToHighlight.setEnd(list, e.target.value);
});

• ::highlight()

• Highlight
• HighlightRegistry

This module adds properties and methods to interfaces defined in other specifications.

• CSS
  • CSS.highlights

CSS custom highlight API

The concepts and usage of the CSS custom highlight API, including creating Range and Highlight objects, registering the highlights using the HighlightRegistry, and styling the highlights using the ::highlight() pseudo-element.

• ::grammar-error
• ::selection
• ::spelling-error
• ::target-text
• Range Interface and Range() constructor
• Text fragments
• FragmentDirective Interface

• CSS pseudo-element module
• CSS Object Model (CSSOM) APIs