v148 · origin trial · DOM

OpaqueRange

A live span of text inside a <textarea> or text-based <input> exposed as a Range-like object. Lets you read geometry (getBoundingClientRect, getClientRects) and apply CSS Custom Highlights to text inside native form controls — without rebuilding the control as a contenteditable div.

Heads up Origin trial. The interface name and exact attribute set may shift before ship.

concepts

  1. Highlight Textarea

    Type into a real <textarea>; select a substring; see its bounding box drawn in the page and (where supported) a CSS Custom Highlight applied to it.

  2. Spell-check Overlay

    The MSEdge explainer's canonical motivating example: draw wavy red underlines under "misspelled" words inside a real <textarea> using OpaqueRange geometry — without ditching the native control for a contenteditable div.

  3. Geometry Playground

    Adjust start and end offsets on a textarea value, then query createValueRange().getBoundingClientRect() and getClientRects(). A canvas overlay draws the reported rectangles so you can see the geometry in context.

  4. Range Highlight Tool

    A rich text editor with shadow DOM custom elements. Select text and create CSS Custom Highlights by type (selection, search match, annotation, spell check). Toggle OpaqueRange vs Standard Range mode to see which highlights fail to span shadow root boundaries — and why OpaqueRange solves this.

  5. Annotation Layer

    Select text in a native <textarea> and annotate it as comment, important, fix-me, or spell-check. Coloured highlights are drawn over the native control using createValueRange() geometry — no contenteditable replacement. An annotation list shows every marked region with start/end offsets and lets you remove individual annotations. Falls back gracefully to canvas overlay simulation when OpaqueRange is not available.

why it exists

Developers can't get accurate text geometry or apply the CSS Custom Highlight API to text inside native textareas and inputs today. As a result, anyone who needs inline diagnostics (linters, spell-check, suggestion popovers) builds a contenteditable div from scratch and loses every native form behaviour in the process. OpaqueRange closes the gap by exposing a Range-like span over the value, so geometry and highlighting work without ditching the native control.

references

implementation reference

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