v148 · origin trial · DOM

Range Highlight Tool

A rich text editor with custom elements and shadow DOM regions. Select text, create highlights, and compare which ranges survive across shadow boundaries with OpaqueRange vs standard Range.

Origin trial OpaqueRange is an origin trial in Chrome 148. This demo uses CSS Custom Highlights (widely supported) and simulates OpaqueRange behaviour with visual indicators showing which ranges would fail with a standard Range across shadow roots.
Checking CSS Custom Highlight API support…

editor

selection highlight
search match
annotation
spell check
Select text in the editor, then create a highlight.

In OpaqueRange mode, ranges that cross shadow roots are marked as surviving. In Standard Range mode, those same ranges are marked as failing.

highlight manager

Active ranges

  • No highlights yet.

Quick actions

OpaqueRange: 0 ranges
Standard Range: 0 ranges
Cross-shadow fails: 0

how OpaqueRange differs

A standard DOM Range cannot span across shadow DOM boundaries — its startContainer and endContainer must be in the same tree. OpaqueRange removes this restriction, enabling CSS Custom Highlights, spell-checking overlays, and search-match highlighting to work uniformly across composed documents.

// Standard Range — fails across shadow roots
const range = new Range();
range.setStart(nodeInLightDom, 0);
range.setEnd(nodeInShadowDom, 5); // throws or silently fails

// OpaqueRange (Chrome 148 origin trial) — works across boundaries
const opaqueRange = document.createOpaqueRange();
opaqueRange.setStart(nodeInLightDom, 0);
opaqueRange.setEnd(nodeInShadowDom, 5); // succeeds

// Apply as CSS Custom Highlight
CSS.highlights.set('my-highlight', new Highlight(opaqueRange));

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗