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

[stephanieyzhang]

WebKittens

@annevk

Title of the proposal

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

URL to the spec

whatwg/dom#1404
whatwg/html#11741
w3c/csswg-drafts#12904

URL to the spec's repository

https://github.com/whatwg/dom
https://github.com/whatwg/html
https://github.com/w3c/csswg-drafts

Issue Tracker URL

whatwg/html#11478

Explainer URL

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

TAG Design Review URL

w3ctag/design-reviews#1206
w3ctag/design-reviews#1142

Mozilla standards-positions issue URL

mozilla/standards-positions#1289

WebKit Bugzilla URL

https://bugs.webkit.org/show_bug.cgi?id=299375

Radar URL

No response

Description

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]

@annevk 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!

[annevk]

This ended up being discussed in detail at TPAC and based on those conversations I made the following suggestions (together with @rniwa): whatwg/html#11478 (comment). Hope that helps.