v140 · css

highlightsFromPoint API

The highlightsFromPoint API enables developers to interact with custom highlights by detecting which highlights exist at a specific point within a document. This interactivity is valuable for complex web features where multiple highlights may overlap or exist within shadow DOM. By providing precise point-based highlight detection, the API empowers developers

concepts

  1. highlightsFromPoint

    highlightsFromPoint() returns the Custom Highlights at a coordinate. Hit-testing highlight tooltips becomes a one-call operation.

  2. Overlap Tooltip

    The motivating use case: overlapping comment + search + spell-check highlights. Mouseover surfaces every highlight at the cursor via a live tooltip.

  3. Stacked Annotations

    Four overlapping editor highlights — grammar, style, fact-check, tone — with a hover tooltip that lists every highlight at the cursor, top of stack first.

  4. Shadow Piercer

    Pass shadowRoots to the point query to reach into your own components' shadow trees without breaking encapsulation. Explicit allowlist, not a default sweep.

  5. Comment Anchor

    A Google-Docs-style sidebar that lights up every comment anchored at the cursor, even when comments overlap. The pattern in 50 lines.

why it shipped

Highlights visually differentiate specific ranges within a document, such as comments, search results, or spelling errors. As web features grow more complex, managing custom highlights becomes increasingly challenging, particularly when dealing with overlapping highlights or content within the shadow DOM. Developers need a way to interact with individual highlights at precise points within the document, enabling more efficient control of dynamic and interactive content with custom highlights. This allows for features like displaying custom tooltips, context menus, or other interactive elements

references