)]}'
{"id": 6297362687066112, "name": "OpaqueRange", "summary": "`OpaqueRange` represents a live span of text within a form control\u2019s value, such as a `<textarea>` or text-based `<input>`, so developers can work with value text using range-like APIs.\n\nIt enables operations such as `getBoundingClientRect()`, `getClientRects()`, and integration with the CSS Custom Highlight API for UI such as inline suggestions, highlights, and anchored popovers. It preserves encapsulation by exposing only value offsets and not `startContainer` and `endContainer`, so DOM endpoints and internal structure are private.", "markdown_fields": [], "blink_components": ["Blink>DOM"], "star_count": 86, "search_tags": [], "created": {"by": "ansollan@microsoft.com", "when": "2025-07-16 18:57:18.741075"}, "updated": {"by": "stephanie.zhang@microsoft.com", "when": "2026-10-20 21:07:16.086929"}, "category": "DOM", "category_int": 5, "feature_notes": null, "web_feature": "opaquerange", "is_official_web_feature": true, "webdx_usecounter_enum": null, "enterprise_feature_categories": [], "enterprise_product_category": 0, "is_releasenotes_content_reviewed": false, "is_releasenotes_publish_ready": false, "stages": [{"id": 5178802610896896, "created": "2025-07-16 18:57:19.295468", "feature_id": 6297362687066112, "stage_type": 110, "display_name": null, "pm_emails": [], "tl_emails": [], "ux_emails": [], "te_emails": [], "intent_thread_url": null, "announcement_url": null, "experiment_goals": null, "experiment_risks": null, "origin_trial_id": null, "origin_trial_feedback_url": null, "ot_action_requested": false, "ot_approval_buganizer_component": null, "ot_approval_buganizer_custom_field_id": null, "ot_approval_criteria_url": null, "ot_approval_group_email": null, "ot_chromium_trial_name": null, "ot_description": null, "ot_display_name": null, "ot_documentation_url": null, "ot_emails": [], "ot_feedback_submission_url": null, "ot_has_third_party_support": false, "ot_is_critical_trial": false, "ot_is_deprecation_trial": false, "ot_owner_email": null, "ot_requester_email": null, "ot_require_approvals": false, "ot_use_counter_bucket_number": null, "ot_webfeature_use_counter": null, "extensions": [], "experiment_extension_reason": null, "ot_stage_id": null, "finch_url": null, "rollout_milestone": null, "rollout_platforms": [], "rollout_details": null, "rollout_impact": 2, "rollout_stage_plan": null, "enterprise_policies": [], "desktop_first": null, "android_first": null, "ios_first": null, "webview_first": null, "desktop_last": null, "android_last": null, "ios_last": null, "webview_last": null}, {"id": 6247996953722880, "created": "2025-07-16 18:57:19.427645", "feature_id": 6297362687066112, "stage_type": 120, "display_name": null, "pm_emails": [], "tl_emails": [], "ux_emails": [], "te_emails": [], "intent_thread_url": "https://groups.google.com/a/chromium.org/d/msgid/blink-dev/LV9PR21MB5189A114B34C8A3685A3C4A4805CA%40LV9PR21MB5189.namprd21.prod.outlook.com", "announcement_url": null, "experiment_goals": null, "experiment_risks": null, "origin_trial_id": null, "origin_trial_feedback_url": null, "ot_action_requested": false, "ot_approval_buganizer_component": null, "ot_approval_buganizer_custom_field_id": null, "ot_approval_criteria_url": null, "ot_approval_group_email": null, "ot_chromium_trial_name": null, "ot_description": null, "ot_display_name": null, "ot_documentation_url": null, "ot_emails": [], "ot_feedback_submission_url": null, "ot_has_third_party_support": false, "ot_is_critical_trial": false, "ot_is_deprecation_trial": false, "ot_owner_email": null, "ot_requester_email": null, "ot_require_approvals": false, "ot_use_counter_bucket_number": null, "ot_webfeature_use_counter": null, "extensions": [], "experiment_extension_reason": null, "ot_stage_id": null, "finch_url": null, "rollout_milestone": null, "rollout_platforms": [], "rollout_details": null, "rollout_impact": 2, "rollout_stage_plan": null, "enterprise_policies": [], "desktop_first": null, "android_first": null, "ios_first": null, "webview_first": null, "desktop_last": null, "android_last": null, "ios_last": null, "webview_last": null}, {"id": 5206648444157952, "created": "2025-07-16 18:57:19.540154", "feature_id": 6297362687066112, "stage_type": 130, "display_name": null, "pm_emails": [], "tl_emails": [], "ux_emails": [], "te_emails": [], "intent_thread_url": null, "announcement_url": null, "experiment_goals": null, "experiment_risks": null, "origin_trial_id": null, "origin_trial_feedback_url": null, "ot_action_requested": false, "ot_approval_buganizer_component": null, "ot_approval_buganizer_custom_field_id": null, "ot_approval_criteria_url": null, "ot_approval_group_email": null, "ot_chromium_trial_name": null, "ot_description": null, "ot_display_name": null, "ot_documentation_url": null, "ot_emails": [], "ot_feedback_submission_url": null, "ot_has_third_party_support": false, "ot_is_critical_trial": false, "ot_is_deprecation_trial": false, "ot_owner_email": null, "ot_requester_email": null, "ot_require_approvals": false, "ot_use_counter_bucket_number": null, "ot_webfeature_use_counter": null, "extensions": [], "experiment_extension_reason": null, "ot_stage_id": null, "finch_url": null, "rollout_milestone": null, "rollout_platforms": [], "rollout_details": null, "rollout_impact": 2, "rollout_stage_plan": null, "enterprise_policies": [], "desktop_first": 148, "android_first": 148, "ios_first": null, "webview_first": null, "desktop_last": null, "android_last": null, "ios_last": null, "webview_last": null}, {"id": 6289531300741120, "created": "2025-07-16 18:57:19.606351", "feature_id": 6297362687066112, "stage_type": 140, "display_name": null, "pm_emails": [], "tl_emails": [], "ux_emails": [], "te_emails": [], "intent_thread_url": null, "announcement_url": null, "experiment_goals": null, "experiment_risks": null, "origin_trial_id": null, "origin_trial_feedback_url": null, "ot_action_requested": false, "ot_approval_buganizer_component": null, "ot_approval_buganizer_custom_field_id": null, "ot_approval_criteria_url": null, "ot_approval_group_email": null, "ot_chromium_trial_name": null, "ot_description": null, "ot_display_name": null, "ot_documentation_url": null, "ot_emails": [], "ot_feedback_submission_url": null, "ot_has_third_party_support": false, "ot_is_critical_trial": false, "ot_is_deprecation_trial": false, "ot_owner_email": null, "ot_requester_email": null, "ot_require_approvals": false, "ot_use_counter_bucket_number": null, "ot_webfeature_use_counter": null, "extensions": [], "experiment_extension_reason": null, "ot_stage_id": null, "finch_url": null, "rollout_milestone": null, "rollout_platforms": [], "rollout_details": null, "rollout_impact": 2, "rollout_stage_plan": null, "enterprise_policies": [], "desktop_first": null, "android_first": null, "ios_first": null, "webview_first": null, "desktop_last": null, "android_last": null, "ios_last": null, "webview_last": null}, {"id": 5155056005152768, "created": "2025-07-16 18:57:19.677178", "feature_id": 6297362687066112, "stage_type": 150, "display_name": "OpaqueRange", "pm_emails": [], "tl_emails": [], "ux_emails": [], "te_emails": [], "intent_thread_url": "https://groups.google.com/a/chromium.org/g/blink-dev/c/jrIXiBUbQm0", "announcement_url": null, "experiment_goals": "Validate API design and gather developer feedback on whether the API meets their needs.", "experiment_risks": "When the trial ends, sites that relied on `OpaqueRange` for popup positioning or custom highlights will lose access to the API until it ships.", "origin_trial_id": "1731071106770534401", "origin_trial_feedback_url": null, "ot_action_requested": false, "ot_approval_buganizer_component": null, "ot_approval_buganizer_custom_field_id": null, "ot_approval_criteria_url": null, "ot_approval_group_email": null, "ot_chromium_trial_name": "OpaqueRange", "ot_description": "OpaqueRange lets developers create live ranges over text inside <input> and <textarea> elements that automatically update as the user edits. These ranges support geometry methods like getBoundingClientRect() and the CSS Custom Highlight API, enabling use cases like caret-positioned popups and inline spell-check highlighting directly on form controls without cloning elements or exposing internal DOM structure.", "ot_display_name": "OpaqueRange", "ot_documentation_url": "https://www.youtube.com/watch?v=Sp9C68TZXiE", "ot_emails": ["stephanie.zhang@microsoft.com", "leolee@microsoft.com", "daniec@microsoft.com", "ansollan@microsoft.com"], "ot_feedback_submission_url": "https://github.com/MicrosoftEdge/MSEdgeExplainers/issues/new?template=opaque-range.md", "ot_has_third_party_support": false, "ot_is_critical_trial": false, "ot_is_deprecation_trial": false, "ot_owner_email": "masonfreed@google.com", "ot_requester_email": null, "ot_require_approvals": false, "ot_use_counter_bucket_number": 5814, "ot_webfeature_use_counter": "kOpaqueRange", "extensions": [], "experiment_extension_reason": null, "ot_stage_id": null, "finch_url": null, "rollout_milestone": null, "rollout_platforms": [], "rollout_details": null, "rollout_impact": 2, "rollout_stage_plan": null, "enterprise_policies": [], "desktop_first": 148, "android_first": 148, "ios_first": null, "webview_first": 148, "desktop_last": 150, "android_last": 150, "ios_last": null, "webview_last": 150, "ot_setup_status": 6}, {"id": 5198204873998336, "created": "2025-07-16 18:57:20.016713", "feature_id": 6297362687066112, "stage_type": 160, "display_name": null, "pm_emails": [], "tl_emails": [], "ux_emails": [], "te_emails": [], "intent_thread_url": "https://groups.google.com/a/chromium.org/d/msgid/blink-dev/DM4PR00MB26251F0F777E6EB629B85F46EC342%40DM4PR00MB2625.namprd00.prod.outlook.com", "announcement_url": null, "experiment_goals": null, "experiment_risks": null, "origin_trial_id": null, "origin_trial_feedback_url": null, "ot_action_requested": false, "ot_approval_buganizer_component": null, "ot_approval_buganizer_custom_field_id": null, "ot_approval_criteria_url": null, "ot_approval_group_email": null, "ot_chromium_trial_name": null, "ot_description": null, "ot_display_name": null, "ot_documentation_url": null, "ot_emails": [], "ot_feedback_submission_url": null, "ot_has_third_party_support": false, "ot_is_critical_trial": false, "ot_is_deprecation_trial": false, "ot_owner_email": null, "ot_requester_email": null, "ot_require_approvals": false, "ot_use_counter_bucket_number": null, "ot_webfeature_use_counter": null, "extensions": [], "experiment_extension_reason": null, "ot_stage_id": null, "finch_url": null, "rollout_milestone": null, "rollout_platforms": [], "rollout_details": null, "rollout_impact": 2, "rollout_stage_plan": null, "enterprise_policies": [], "desktop_first": 152, "android_first": 152, "ios_first": null, "webview_first": 152, "desktop_last": null, "android_last": null, "ios_last": null, "webview_last": null}], "accurate_as_of": "2026-10-20 21:07:16.086929", "creator_email": "ansollan@microsoft.com", "updater_email": "stephanie.zhang@microsoft.com", "owner_emails": ["ansollan@microsoft.com", "andresrega@microsoft.com", "leolee@microsoft.com", "stephanie.zhang@microsoft.com"], "editor_emails": [], "cc_emails": [], "spec_mentor_emails": [], "unlisted": false, "deleted": false, "editors": [], "cc_recipients": [], "spec_mentors": [], "creator": "ansollan@microsoft.com", "feature_type": "New or changed feature", "feature_type_int": 0, "intent_stage": "None", "intent_stage_int": 0, "active_stage_id": 5198204873998336, "bug_url": "https://issues.chromium.org/issues/421421332", "launch_bug_url": null, "new_crbug_url": "https://bugs.chromium.org/p/chromium/issues/entry?components=Blink>DOM&blocking=421421332&cc=ansollan@microsoft.com,andresrega@microsoft.com,leolee@microsoft.com,stephanie.zhang@microsoft.com", "screenshot_links": [], "first_enterprise_notification_milestone": null, "enterprise_impact": 1, "breaking_change": false, "confidential": false, "shipping_year": 2026, "flag_name": null, "finch_name": "OpaqueRange", "non_finch_justification": "", "ongoing_constraints": "None", "rollout_plan": 0, "rollout_plan_displayname": "Will ship enabled for all users", "motivation": "Currently, developers can\u2019t get accurate text geometry or apply the CSS Custom Highlight API to text inside native `<textarea>` and text-based `<input>` controls.\n\nAs a result, they often avoid native form controls and build editable `<div>`-based workarounds to anchor UI, such as autocomplete popovers, or to highlight matches. These workarounds require reimplementing native editing behavior and can have accessibility gaps.\n\n`OpaqueRange` enables range-based operations on the control\u2019s value text, so developers can measure text geometry and build text-anchored UI directly in native controls.\n\n", "devtrial_instructions": null, "activation_risks": "Moderate. Developers need to learn the value-offset model and how it differs from `Range` (there are no DOM endpoints).", "measurement": "UseCounter `OpaqueRange` measures successful creation of `OpaqueRange` objects on `<textarea>` and text-based `<input>` elements.", "availability_expectation": "Feature is available only in Chromium browsers for the foreseeable future. \n`OpaqueRange` is at WHATWG Stage 2 with informal approval of the current spec direction from Mozilla and WebKit reviewers and is moving toward Stage 3. We are continuing to seek official standards positions from Mozilla and WebKit.", "adoption_expectation": "Feature is expected to be used by specific partner(s) within 12 months of launch in Chrome. \nThe Microsoft Editor SDK team has confirmed plans to adopt the feature and intends to land integration behind a switch ahead of ship.", "adoption_plan": "Stay engaged with Microsoft Editor SDK on rollout.\nContinue WHATWG work toward Stage 3; seek formal Firefox/WebKit positions.\nMonitor use counter and bug reports post-ship.\nDeveloper outreach already underway on Mastodon, Bluesky, YouTube, LinkedIn.", "initial_public_proposal_url": "https://github.com/whatwg/html/issues/10614", "explainer_links": ["https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/OpaqueRange/explainer.md"], "requires_embedder_support": false, "spec_link": "https://github.com/whatwg/dom/pull/1404", "api_spec": true, "automation_spec": false, "interop_compat_risks": "`OpaqueRange` adds new methods, such as `createValueRange()`, to `<textarea>` and supported text-based `<input>` elements so authors can create ranges over value text. It does not change existing editing or selection behavior, so the risk to existing sites is low.\n\nThe main interoperability risk is lack of implementation across engines, which could make text-anchored UI or highlights inside native controls work in only some browsers.", "all_platforms": true, "all_platforms_descr": "Works on all platforms that support `<input>` and `<textarea>` elements.", "non_oss_deps": "No", "anticipated_spec_changes": "No known non-backward-compatible spec changes are expected. The spec PRs are under active review, and any remaining feedback is expected to be editorial or otherwise backward-compatible.", "security_risks": "No new data exposure beyond existing access to form control values and selection. Exposes only value offsets and geometry and does not expose internal DOM (`startContainer`/`endContainer` are `null`).", "ergonomics_risks": "`OpaqueRange` is typically used with selection offsets and with geometry/highlighting APIs. The geometry calls are synchronous and can trigger layout, similar to existing `Range` geometry methods. Since the range is live, offsets are updated as the control\u2019s value is edited.", "wpt": true, "wpt_descr": "https://wpt.fyi/results/dom/ranges/tentative?label=experimental&label=master&aligned", "webview_risks": "Low. `OpaqueRange` adds a new method to `<textarea>` and supported text-based `<input>` elements, but does not change or deprecate any existing behavior.", "devrel_emails": ["devrel-chromestatus-all@google.com"], "debuggability": "No DevTools changes required.", "doc_links": [], "sample_links": ["https://github.com/MicrosoftEdge/Demos/tree/main/opaque-range"], "prefixed": false, "tags": [], "tag_review": "https://github.com/w3ctag/design-reviews/issues/1206", "tag_review_status": "Pending", "tag_review_status_int": 1, "security_review_status": "Pending", "security_review_status_int": 1, "privacy_review_status": "Pending", "privacy_review_status_int": 1, "security_continuity_id": null, "security_launch_issue_id": null, "updated_display": null, "resources": {"samples": ["https://github.com/MicrosoftEdge/Demos/tree/main/opaque-range"], "docs": []}, "comments": null, "ff_views": 5, "safari_views": 5, "web_dev_views": 2, "browsers": {"chrome": {"bug": "https://issues.chromium.org/issues/421421332", "blink_components": ["Blink>DOM"], "devrel": ["devrel-chromestatus-all@google.com"], "owners": ["ansollan@microsoft.com", "andresrega@microsoft.com", "leolee@microsoft.com", "stephanie.zhang@microsoft.com"], "origintrial": false, "prefixed": false, "flag": false, "status": {"text": "Proposed", "val": 2, "milestone_str": "Proposed"}, "announced": true, "desktop": 152, "android": 152, "webview": 152, "ios": null}, "ff": {"view": {"url": "https://github.com/mozilla/standards-positions/issues/1289", "notes": null, "text": "Positive", "val": 3}}, "safari": {"view": {"url": "https://github.com/WebKit/standards-positions/issues/541", "notes": null, "text": "Support", "val": 3}}, "webdev": {"view": {"text": "Positive", "val": 2, "url": "https://github.com/w3c/csswg-drafts/issues/4603", "notes": "The citation link is a request for ranges inside `<textarea>`/`<input>` to support spellchecking/grammar highlights.\n\nhttps://github.com/w3c/csswg-drafts/issues/10346: request for selection/caret geometry in `<textarea>`/`<input>` to anchor autocomplete popovers and similar UI.\n\nhttps://github.com/MicrosoftEdge/MSEdgeExplainers/issues/1104: developer feedback that `OpaqueRange` (previously `FormControlRange`) would be useful because existing overlay workarounds are hard to keep in sync and can visibly lag."}}, "other": {"view": {"text": null, "val": null, "url": null, "notes": null}}}, "standards": {"spec": "https://github.com/whatwg/dom/pull/1404", "maturity": {"text": "Specification currently under development in a Working Group", "short_text": "Working draft", "val": 4}}, "is_released": false, "is_enterprise_feature": false, "experiment_timeline": null, "ai_test_eval_report": null, "ai_test_eval_run_status": null, "ai_test_eval_status_timestamp": null}