OpaqueRange: AbstractRange subtype for encapsulated content (<input>, <textarea>)

[stephanieyzhang]

Specification title

OpaqueRange: AbstractRange subtype for encapsulated content (<input>, <textarea>)

Specification or proposal URL (if available)

whatwg/html#11478 (Discussion thread)

whatwg/dom#1404 (DOM Spec PR)
whatwg/html#11741 (HTML Spec PR)
w3c/csswg-drafts#12904 (CSSOM View PR)

Explainer URL (if available)

https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/OpaqueRange/explainer.md

Proposal author(s)

@stephanieyzhang, @anaskim, @dandclark, @leolee

MDN URL

No response

Caniuse.com URL

No response

Bugzilla URL

https://bugzilla.mozilla.org/show_bug.cgi?id=1990256

Mozillians who can provide input

@keithamus @smaug----

WebKit standards-position

WebKit/standards-positions#541

Other information

Currently, web developers can't perform range-based operations, such as getting bounding rects or setting custom highlights, inside native text controls (<input>, <textarea>). As a result, they often resort to workarounds such as replicating the control and its styles in a separate element and reimplementing input behavior, which is difficult and error-prone to keep in sync with native behavior.

OpaqueRange is an AbstractRange subtype for ranges over encapsulated content. Its startContainer and endContainer return null, preserving encapsulation while still exposing offsets and geometry. The DOM spec defines the core OpaqueRange interface, HTML defines which text controls support opaque ranges and how authors create them via createValueRange(), and CSSOM View defines geometry methods such as getClientRects() and getBoundingClientRect(). This enables range-based operations directly in native controls without exposing internal DOM.

[stephanieyzhang]

@keithamus Just following up on this position request for FormControlRange. Would you be able to take a look or point me to the right person? Thanks!