v152 · DOM · demo

Text Search Highlighter

A Ctrl+F-style search that uses OpaqueRange to highlight matches inside both the main document and shadow DOM components — something regular Range cannot do across shadow boundaries.

0 matches
Highlight mode:

The web platform continues to evolve with new APIs every Chrome release. From CSS anchor positioning to the View Transitions API, developers have powerful new tools.

shadow DOM — component A

Back in the light DOM: accessibility improvements and performance APIs make the platform more capable than ever.

shadow DOM — component B

OpaqueRange makes it possible to create Range objects whose endpoints live in different shadow trees, enabling cross-shadow text operations like search and highlight.

Shadow DOM test results
Search for a word to see the comparison.

How it works

  1. The document has two shadow DOM components. Each contains unique text.
  2. OpaqueRange mode walks all text nodes including those inside shadow roots via TreeWalker over each shadow tree, creating ranges with cross-shadow endpoints.
  3. Regular Range mode only walks the main document tree — shadow DOM text is invisible to it.
  4. All matches are registered with CSS.highlights.set('search-results', new Highlight(...ranges)).
  5. The current match is tracked separately as 'search-current' with a distinct highlight color.

If OpaqueRange or CSS Custom Highlights are unavailable, the demo falls back to <mark> injection.

see also