Using the Custom Highlight API
August 12, 2025
The Custom Highlight API came to my attention recently as Firefox recently started supporting it (Firefox 140, June 2025), which brought support across all the major browsers. With it, you can apply (some) styling to text that you get your hands on in JavaScript via the Range() class. I would say text that you select, but there aren’t really normal selectors involved here, making it rather unusual to work with for a CSS guy like me.I think a basic word explanation is helpful here, as it sure would have helped me when I first started poking at it:
Source: Using the Custom Highlight API – Frontend Masters Blog
Traditionally, to style a part of a web page, we would need a document fragment to apply that style to. An exception to this is the custom highlight API which enables us to identify a word or a range within a specific document element to apply style to.
This article explains how to work with it and some use cases for where it may be valuable.
