Unlock text editing use cases with highlightsFromPoint and other FromPoint APIs

We’re excited to announce the availability of the highlightsFromPoint() method in Microsoft Edge 140, and other Chromium-based browsers, a useful addition to the CSS Custom Highlight API, which makes it possible to find existing highlights at a given x, y coordinate.
Drawing highlights in CSS
The CSS Custom Highlight API allows you to highlight arbitrary ranges of text, without having to add new elements to the DOM.
This API works by creating Range objects in JavaScript, registering these ranges using the CSS.highlights registry, and then highlighting the ranges in CSS, by using the ::highlight() pseudo-element:

This API is great for dynamic styling of text ranges that don’t need to, or can’t, exist in the DOM, which is often the case for client-side text editors.
The following screenshot shows different types of highlights that were created by using the CSS Custom Highlight API (see the live demo):

Introducing highlightsFromPoint()
And today, starting with Edge 140, we’re adding one more piece to the puzzle: the CSS.highlights.highlightsFromPoint() method.
This new method lets you detect the custom highlights that exist at a given x, y coordinate location on the screen, so that you can alter the appearance of the highlight or display additional UI elements around it. This makes it a lot simpler to implement features like spellcheck, collaborative editing, tooltips, contextual menus, or search.
CSS.highlights.highlightsFromPoint() can detect highlights and their corresponding text ranges in the DOM and Shadow DOM without having to write complicated hit-testing code. Now, adding interactive features, with high performance, particularly when dealing with overlapping highlights or shadow DOMs, is much easier.
The following screenshot shows a popup which lists three overlapping highlights applied to a text range which the user clicked:

To learn more, see HighlightRegistry: highlightsFromPoint() method, at MDN, and see the API in action by using our API demo (source code).
Other *FromPoint APIs
The highlightsFromPoint() method might remind you of other similarly named methods:

document.elementsFromPoint() (and its ShadowRoot equivalent).
document.elementFromtPoint() (and its ShadowRoot equivalent).
document.caretPositionFromPoint()

Just like highlightsFromPoint(), these methods also provide DOM information based on x, y coordinates on the screen, and they can be very useful for cases where users interact with the UI by clicking or hovering, and where location-based detection is needed instead of using pre-set event listeners or explicit element references.
The *FromPoint APIs are especially useful for text editing scenarios but can also be used to implement drag and drop, simulate actions at specific coordinates (such as in automated testing or games), and enable tools or extensions to identify page elements without prior knowledge of their IDs or selectors.
Check out our highlighter demo (and source code) to see how you can use the caretPositionFromPoint and highlightsFromPoint together to let users create and delete different highlights in text, without needing to create extra DOM elements.

Let us know what you think
We’d love to hear your feedback about the new CSS.highlights.highlightsFromPoint() API, such as the use cases it allows you to implement, the ideas you have for future improvements, or the problems you might be running into.
For feedback about the API, please file an issue in the CSS Working Group repository. If your feedback is about a bug in Microsoft Edge instead, please send feedback to our team from the browser directly: go to Settings and more (…) > Help and feedback > Send feedback.