demo · v140

Shadow Piercer

Custom highlights inside a shadow root are normally invisible to a top-level point query. highlightsFromPoint takes a shadowRoots option that lets a click handler — say, a doc-wide search-and-jump — reach into known shadow trees explicitly.

Two paragraphs below. The second lives inside a closed-feeling shadow root attached to a custom element.

The renderer in the light DOM is just an article paragraph. Highlights in light DOM are queryable by default.

highlight some text and probe a point

const card = document.querySelector("my-card");

const hits = document.highlightsFromPoint(x, y, {
  shadowRoots: [card.shadowRoot],   // explicit allowlist
});

why the explicit list

A query that traversed every shadow root by default would let any script poke through encapsulation boundaries it didn't own — exactly what shadow DOM exists to prevent. The shadowRoots option preserves that boundary: the page can opt into its own components' trees, but cannot peek into a third-party widget's. Most search-and-jump implementations only need their own roots anyway.

see also