Editorial review: Add docs for the HighlightRegistry.highlightsFromPoint() method

[chrisdavidmills]

Description

Chrome 140 adds support for the HighlightRegisty.highlightsFromPoint() method; see https://chromestatus.com/feature/4552801607483392.

This PR adds docs for the new method.

The Spec and browser compat tables are not currently showing, but will soon. The necessary data is added in mdn/browser-compat-data#27310.

Motivation

Additional details

Related issues and pull requests

[github-actions]

Preview URLs

• /en-US/docs/Web/API/HighlightRegistry/highlightsFromPoint
• /en-US/docs/Web/API/HighlightRegistry

(comment last updated: 2025-07-23 13:54:24)

[ffiori]

Thanks for working on this article! I left some comments after a first review but it's looking great.

[chrisdavidmills]

Thanks for the review, @ffiori! I've responded to all your comments. Please let me know if you think this needs anything else, or give me a "LGTM" if you think it is ready to go to the editorial review stage.

[ffiori]

Left a couple comments after reviewing the new version. And thanks for addressing the previous ones, it's looking really good!

[chrisdavidmills]

That's the last few bits of cleanup dealt with; thanks @ffiori for taking the time to provide me with a great tech review.

I think this is now ready to go to the editorial review stage.

[ffiori]

That's the last few bits of cleanup dealt with; thanks @ffiori for taking the time to provide me with a great tech review.

I think this is now ready to go to the editorial review stage.

Agreed, LGTM! Thanks for addressing all the feedback and putting all this together :)

(I can't hit approve because it seems I don't have the permissions to do so in this repo but consider it approved by me)

[estelle]

The example is a good one, but there is so much that needs to happen to demonstrate this feature. I think it might be helpful to explain that the example is really two parts; the first step is creating the custom highlights, and the second is the point of the page, basically state that "this part isn't just so we can do the relevant part" (and maybe add a link there to the the create custom highlight examples, and to the page we just added yesterday).

There are a few minor edits too.

All the other edits are me trying to shrink the example. I did a CodePen, to hopefully reduce the complexity and shrink the explanation. See https://codepen.io/estelle/pen/jEbqrxx. I highlighted the edits i made so you know what to look for.Please take a look at the codepen suggested shrinkage before reading all the code change suggestions. Then hopefully the feedback below won't be overwhelming.

I did comment where I made suggested changes in that codepen. There are several variable name suggestions in the codepen.

[estelle]

Looks good. I think it would be helpful to divide the example explanation into two parts, so I suggested a way of doing that... your text may vary.

Otherwise, LGTM.

[estelle]

Suggested change

	We start by grabbing references to the `<p>` element, its contained text node, and our `<section>` element. We then create a variable called `highlightCount`, initially set to `1`, which will be used to specify which custom highlight to apply later on.
	##### Create custom highlights
	To create custom highlights, we start by grabbing references to the `<p>` element, its contained text node, and our `<section>` element. We then create a variable called `highlightCount`, initially set to `1`, which will be used to specify which custom highlight to apply later on.

[chrisdavidmills]

Yeah, this is quite a nice suggestion — see my next commit. I have also moved the section global definition into the second section, so it is right by the point where it gets used.

[estelle]

Suggested change

	To demonstrate the `highlightsFromPoint()` method, we need to have some highlights that can be returned.

[chrisdavidmills]

updated

[estelle]

Suggested change

	Next, we define a [`dblclick`](/en-US/docs/Web/API/Element/dblclick_event) event handler function to handle outputting the highlighted text at the mouse cursor position when the event fires. We pass the current mouse coordinates into a `highlightsFromPoint()` call, clear the contents of the `<section>` element, then loop through each highlight in the `highlights` array.
	##### Returning custom highlights from a point
	Now that we have the ability to create custom highlights, we can use the highlightsFromPoint() method to return custom highlights from a defined point.
	We define a [`dblclick`](/en-US/docs/Web/API/Element/dblclick_event) event handler function to handle outputting the highlighted text at the mouse cursor position when the event fires. We pass the current mouse coordinates into a `highlightsFromPoint()` call, clear the contents of the `<section>` element, then loop through each highlight in the `highlights` array.

[chrisdavidmills]

updated

[estelle]

Yay!