CSS Custom Highlight highlightsFromPoint API demo

Try searching for text using the search field above. The matching text is highlighted in yellow.

Hover any highlighted text to see which highlights are active at that point using CSS.highlights.highlightsFromPoint().

Use the checkbox above to control whether the highlightsFromPoint() method should include highlights from Shadow DOM content, and whether to highlight search results in Shadow DOM.

For more details, see HighlightRegistry: highlightsFromPoint() method on MDN.

Sample text with pre-existing highlights

This demostrate overlapping highlights with speling errors and grammer mistake, among others. [John Doe et al., 2023] showed that "the future of web-based text editing lies in layered highlihgting capabilities" for modern writting platforms. The highlightsFromPoint() method allowes developers to query active highlights at any position, which is particually usefull for interactive text applications [Someone, 2022].

Shadow DOM Content: