)]}'
{"id": 5188237101891584, "name": "Reference Target for Cross-root ARIA", "summary": "Reference Target enables ID attributes like <label for>, aria-labelledby, popovertarget, and commandfor to be forwarded to elements inside a component's shadow DOM, while maintaining the shadow's encapsulation of its internal state. \n\nWhen a shadow host specifies an element in its shadow tree to act as its reference target, all ID references pointing to the shadow host are forwarded to the reference target element instead.\n\n<label for=\"my-checkbox\">Checkbox value (click me to toggle checkbox)</label>\n<custom-checkbox id=\"my-checkbox\">\n  <template shadowrootmode=\"open\" shadowrootreferencetarget=\"real-checkbox\">\n    <input id=\"real-checkbox\" type=\"checkbox\">\n  </template>\n</custom-checkbox>\n\nThe reference target can be set declaratively like in the above example, or in JavaScript with ShadowRoot's referenceTarget property.", "markdown_fields": [], "blink_components": ["Blink>DOM>ShadowDOM"], "star_count": 75, "search_tags": [], "created": {"by": "slightlyoff@chromium.org", "when": "2023-08-01 22:10:07.396021"}, "updated": {"by": "daniec@microsoft.com", "when": "2026-07-22 18:45:08.192729"}, "category": "Web Components", "category_int": 1, "feature_notes": null, "web_feature": "referencetarget", "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": 5195703164338176, "created": "2023-08-01 22:10:07.646595", "feature_id": 5188237101891584, "stage_type": 110, "display_name": null, "intent_stage": 7, "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": 5100948266942464, "created": "2023-08-01 22:10:07.748085", "feature_id": 5188237101891584, "stage_type": 120, "display_name": null, "intent_stage": 1, "pm_emails": [], "tl_emails": [], "ux_emails": [], "te_emails": [], "intent_thread_url": "https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CH3PR00MB1627F4E2554F7969B2B61E94D3FFA%40CH3PR00MB1627.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": null, "android_first": null, "ios_first": null, "webview_first": null, "desktop_last": null, "android_last": null, "ios_last": null, "webview_last": null}, {"id": 6285585425104896, "created": "2023-08-01 22:10:07.921034", "feature_id": 5188237101891584, "stage_type": 130, "display_name": null, "intent_stage": 2, "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": 4878210541551616, "created": "2023-08-01 22:10:07.979486", "feature_id": 5188237101891584, "stage_type": 140, "display_name": null, "intent_stage": 4, "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": 5096069452529664, "created": "2023-08-01 22:10:08.023228", "feature_id": 5188237101891584, "stage_type": 150, "display_name": "Reference Target for Cross-Root ARIA", "intent_stage": 3, "pm_emails": [], "tl_emails": [], "ux_emails": [], "te_emails": [], "intent_thread_url": "https://groups.google.com/a/chromium.org/d/msgid/blink-dev/DS0PR00MB23422839CBB35C320F9CC344C5202%40DS0PR00MB2342.namprd00.prod.outlook.com", "announcement_url": null, "experiment_goals": "We're looking for feedback on all of the following from developers who spend some time building with the feature:\n- Are the ergonomics reasonable? Is the API tricky to build with such that one of the alternatives discussed in https://github.com/w3ctag/design-reviews/issues/961 would be strongly preferable?\n- What, if any, specific things would they like to build where this version of reference target is not sufficient and something like Phase 2 (https://github.com/WICG/webcomponents/blob/gh-pages/proposals/reference-target-explainer.md#phase-2) would be needed?\n- What would be the least surprising behavior for invalid references? No association, or an association with the host element? https://github.com/WICG/webcomponents/issues/1071", "experiment_risks": "None", "origin_trial_id": "2164542570904944641", "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": "ShadowRootReferenceTarget", "ot_description": "The Reference Target API allows ID-based references, particularly from <label> elements and ARIA properties, to refer to elements inside shadow roots (frequently used in Web Components). This fills a frequently cited gap in Web Components a11y.", "ot_display_name": "Reference Target for Cross-Root ARIA", "ot_documentation_url": "https://github.com/WICG/webcomponents/blob/gh-pages/proposals/reference-target-explainer.md", "ot_emails": ["slightlyoff@chromium.org", "daniec@microsoft.com", "mjackson@microsoft.com"], "ot_feedback_submission_url": "https://github.com/WICG/webcomponents/issues/new?title=Reference%20Target%3A%20", "ot_has_third_party_support": false, "ot_is_critical_trial": false, "ot_is_deprecation_trial": false, "ot_owner_email": "chrishtr@google.com", "ot_requester_email": null, "ot_require_approvals": false, "ot_use_counter_bucket_number": null, "ot_webfeature_use_counter": "WebDXFeature::kDRAFT_ReferenceTarget", "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": 0, "enterprise_policies": [], "desktop_first": 133, "android_first": null, "ios_first": null, "webview_first": null, "desktop_last": 135, "android_last": null, "ios_last": null, "webview_last": null, "ot_setup_status": 6}, {"id": 6021797048483840, "created": "2025-07-22 18:09:48.963281", "feature_id": 5188237101891584, "stage_type": 150, "display_name": null, "intent_stage": 3, "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": 5096180131823616, "created": "2023-08-01 22:10:08.250513", "feature_id": 5188237101891584, "stage_type": 160, "display_name": null, "intent_stage": 5, "pm_emails": [], "tl_emails": [], "ux_emails": [], "te_emails": [], "intent_thread_url": "https://groups.google.com/a/chromium.org/d/msgid/blink-dev/DS0PR00MB2527DA9DA93A1972F5594156C5EE2%40DS0PR00MB2527.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-07-07 15:36:13.882795", "creator_email": "slightlyoff@chromium.org", "updater_email": "daniec@microsoft.com", "owner_emails": ["daniec@microsoft.com", "leolee@microsoft.com"], "editor_emails": ["mjackson@microsoft.com"], "cc_emails": ["aboxhall@chromium.org"], "spec_mentor_emails": [], "unlisted": false, "deleted": false, "editors": ["mjackson@microsoft.com"], "cc_recipients": ["aboxhall@chromium.org"], "spec_mentors": [], "creator": "slightlyoff@chromium.org", "feature_type": "New or changed feature", "feature_type_int": 0, "intent_stage": "None", "intent_stage_int": 0, "active_stage_id": 5096180131823616, "bug_url": "https://issues.chromium.org/issues/346835896", "launch_bug_url": null, "new_crbug_url": "https://bugs.chromium.org/p/chromium/issues/entry?components=Blink>DOM>ShadowDOM&blocking=346835896&cc=daniec@microsoft.com,leolee@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": "ShadowRootReferenceTarget", "non_finch_justification": null, "ongoing_constraints": "None", "rollout_plan": 0, "rollout_plan_displayname": "Will ship enabled for all users", "motivation": "The Shadow DOM presents a problem for accessibility: there is not a way to establish semantic relationships between elements on in different shadow trees (such as via `aria-labelledby`). This limits the ability to design web components in a way that works with accessibility tools such as screen readers. The ARIAMixin IDL attributes (https://w3c.github.io/aria/#ARIAMixin) are a partial solution to the problem; however, they lack the ability to create a reference \"into\" a shadow tree from the outside. Reference Target is a solution to that missing piece of the problem. The specifics of the proposal are detailed in the linked explainer.", "devtrial_instructions": null, "activation_risks": "This is a difficult feature to polyfill since ID reference attributes cannot pierce into shadow roots without it. So there's no way for a polyfill to enable the capability that reference target enables. My hope is that this is mitigated by other browsers shipping the feature. Gecko is positive, I've been discussing the spec changes with engineers from both Gecko and WebKit, and Gecko and WebKit both have prototype implementations.\n\nThere has sometimes been confusion about what scenarios the feature unlocks. e.g. some developers assumed it directed ID references *out* of a shadow root rather than *into* a shadow root. I'll ensure that we have good documentation available including examples like those in https://microsoftedge.github.io/Demos/reference-target/.", "measurement": null, "availability_expectation": "I've received positive engagement on the spec PR from WebKit and Gecko engineers, and the feature is prototyped in both of those engines. So I'm optimistic that they will follow in supporting this feature, though there is no official commitment of support.", "adoption_expectation": "We are working with a developer partner who plans to adopt the feature once it's shipped.", "adoption_plan": null, "initial_public_proposal_url": "https://github.com/WICG/aom/pull/207", "explainer_links": ["https://github.com/WICG/webcomponents/blob/gh-pages/proposals/reference-target-explainer.md"], "requires_embedder_support": false, "spec_link": "https://github.com/whatwg/html/pull/10995", "api_spec": true, "automation_spec": false, "interop_compat_risks": "The interoperability risk is low since engineers from the other browser engines have been active in spec discussions about the feature.\n\nThis feature makes a change to the Toggle, Command, Interest, and Submit events that presents a small compatibility risk. These events each have a source/submitter property that's set to the element triggering the event, e.g. the button element clicked to open a popup. With reference target this element can now be in a parent shadow tree relative to the event is fired. Per discussion in \nhttps://github.com/WICG/webcomponents/issues/1098 there was a desire to have the event's dispatch path include the source/submitter's tree.\n\nThis is done by setting these events' internal relatedTarget (https://dom.spec.whatwg.org/#event-relatedtarget) to their source/submitter and making the event composed when that relatedTarget is non-null. When used with reference target this causes the event path to include a source/submitter in a parent shadow.\n\nWhen used without reference target, there is no change to these events' event paths (since the source/submitter can never be in a parent shadow, therefore the relatedTarget will be in the same tree as the target), but the `composed` property on the event will be set to true. This has already been changed in the past for Command and Interest events (https://chromium-review.googlesource.com/c/chromium/src/+/6505682, https://chromium-review.googlesource.com/c/chromium/src/+/7797864), and there's also history of changing these for Mouse events (https://chromium-review.googlesource.com/c/chromium/src/+/4563502), so I'm optimistic that this won't cause breakage. Most usage on Github (https://github.com/search?q=%2Fevent%5C.composed%5B%5EP%5D%2F&type=code) is either conditional on `bubbles` also being true, which doesn't apply here, or is or is specific to mouse events which aren't affected.", "all_platforms": true, "all_platforms_descr": null, "non_oss_deps": "None", "anticipated_spec_changes": "No breaking changes are expected.", "security_risks": null, "ergonomics_risks": null, "wpt": true, "wpt_descr": "https://wpt.fyi/results/shadow-dom/reference-target", "webview_risks": "None", "devrel_emails": ["devrel-chromestatus-all@google.com"], "debuggability": "No specific DevTools support is expected to be necessary.\nExisting DevTools support for features used with reference target will continue to work. For example, the accessibility tree viewer can be used to check that an aria-labelledby attribute is applied correctly even when it's used cross-shadow-DOM with reference target.", "doc_links": [], "sample_links": ["https://microsoftedge.github.io/Demos/reference-target"], "prefixed": null, "tags": [], "tag_review": "https://github.com/w3ctag/design-reviews/issues/961", "tag_review_status": "Issues addressed", "tag_review_status_int": 3, "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://microsoftedge.github.io/Demos/reference-target"], "docs": []}, "comments": null, "ff_views": 5, "safari_views": 5, "web_dev_views": 2, "browsers": {"chrome": {"bug": "https://issues.chromium.org/issues/346835896", "blink_components": ["Blink>DOM>ShadowDOM"], "devrel": ["devrel-chromestatus-all@google.com"], "owners": ["daniec@microsoft.com", "leolee@microsoft.com"], "origintrial": true, "prefixed": null, "flag": false, "status": {"text": "Origin trial", "val": 8, "milestone_str": "152"}, "announced": true, "desktop": 152, "android": 152, "webview": 152, "ios": null}, "ff": {"view": {"url": "https://github.com/mozilla/standards-positions/issues/1035", "notes": null, "text": "Positive", "val": 3}}, "safari": {"view": {"url": "https://github.com/WebKit/standards-positions/issues/356", "notes": null, "text": "No signal", "val": 5}}, "webdev": {"view": {"text": "Positive", "val": 2, "url": null, "notes": "https://gist.github.com/davatron5000/b6a62cb782f01c69e818cd4585391138\nhttps://github.com/WICG/webcomponents/issues/1120#issuecomment-4156132737\nLots of positive reactions on last year's Interop Project proposal for Reference Target, despite the feature not yet being eligible for the Interop Project at that time: https://github.com/web-platform-tests/interop/issues/1011"}}, "other": {"view": {"text": null, "val": null, "url": null, "notes": null}}}, "standards": {"spec": "https://github.com/whatwg/html/pull/10995", "maturity": {"text": "Specification currently under development in a Working Group", "short_text": "Working draft", "val": 4}}, "is_released": true, "is_enterprise_feature": false, "experiment_timeline": null, "ai_test_eval_report": null, "ai_test_eval_run_status": null, "ai_test_eval_status_timestamp": null}