{
 "compat_features": [
  "api.Element.attachShadow.options_referenceTarget_parameter",
  "api.HTMLTemplateElement.shadowRootReferenceTarget",
  "api.ShadowRoot.referenceTarget",
  "html.elements.template.shadowrootreferencetarget"
 ],
 "description": "The referenceTarget property of a ShadowRoot object forwards attributes such as for and aria-labelledby to elements inside a shadow DOM. You can use this to, for example, link a <label> to its <input> even if the <input> is in the shadow DOM of a web component.",
 "description_html": "The <code>referenceTarget</code> property of a <code>ShadowRoot</code> object forwards attributes such as <code>for</code> and <code>aria-labelledby</code> to elements inside a shadow DOM. You can use this to, for example, link a <code>&#x3C;label></code> to its <code>&#x3C;input></code> even if the <code>&#x3C;input></code> is in the shadow DOM of a web component.",
 "group": [
  "web-components"
 ],
 "kind": "feature",
 "name": "Reference target",
 "spec": [
  "https://github.com/whatwg/dom/pull/1353",
  "https://github.com/whatwg/html/pull/10995"
 ],
 "status": {
  "baseline": false,
  "by_compat_key": {
   "api.Element.attachShadow.options_referenceTarget_parameter": {
    "baseline": false,
    "support": {
     "chrome": "152",
     "chrome_android": "152",
     "edge": "152"
    }
   },
   "api.HTMLTemplateElement.shadowRootReferenceTarget": {
    "baseline": false,
    "support": {
     "chrome": "152",
     "chrome_android": "152",
     "edge": "152"
    }
   },
   "api.ShadowRoot.referenceTarget": {
    "baseline": false,
    "support": {
     "chrome": "152",
     "chrome_android": "152",
     "edge": "152"
    }
   },
   "html.elements.template.shadowrootreferencetarget": {
    "baseline": false,
    "support": {
     "chrome": "152",
     "chrome_android": "152",
     "edge": "152"
    }
   }
  },
  "support": {
   "chrome": "152",
   "chrome_android": "152",
   "edge": "152"
  }
 },
 "id": "referencetarget",
 "groups": [
  "web-components"
 ],
 "specs": [
  {
   "url": "https://github.com/whatwg/dom/pull/1353"
  },
  {
   "url": "https://github.com/whatwg/html/pull/10995"
  }
 ],
 "mdnUrls": [
  {
   "slug": "Web/API/Element/attachShadow#referencetarget",
   "title": "Element: attachShadow() method",
   "anchor": "referencetarget",
   "url": "https://developer.mozilla.org/docs/Web/API/Element/attachShadow#referencetarget"
  },
  {
   "slug": "Web/API/ShadowRoot#shadowroot.referencetarget",
   "title": "ShadowRoot",
   "anchor": "shadowroot.referencetarget",
   "url": "https://developer.mozilla.org/docs/Web/API/ShadowRoot#shadowroot.referencetarget"
  },
  {
   "slug": "Web/HTML/Reference/Elements/template#shadowrootreferencetarget",
   "title": "`<template>` HTML content template element",
   "anchor": "shadowrootreferencetarget",
   "url": "https://developer.mozilla.org/docs/Web/HTML/Reference/Elements/template#shadowrootreferencetarget"
  }
 ],
 "standardPositions": [],
 "hasNegativeStandardPosition": false,
 "stateOfSurveys": [],
 "chromeUseCounters": {
  "percentageOfPageLoad": 0.20750663,
  "url": "https://chromestatus.com/metrics/webfeature/timeline/popularity/246"
 },
 "interop": [],
 "wpt": {
  "url": "https://wpt.fyi/results?q=feature:referencetarget"
 },
 "developerSignals": {
  "url": "https://github.com/web-platform-dx/developer-signals/issues/446",
  "votes": 14
 },
 "bugs": {
  "firefox": [
   "https://bugzil.la/1952585"
  ],
  "chrome": [
   "https://issues.chromium.org/issues/346835896"
  ]
 },
 "useCases": [
  {
   "description": "I want to support more accessible web components in our SSR library. The JS code that people use to emulate reference target like behavior isn't not something we can support on the server without a DOM.",
   "url": "https://github.com/web-platform-dx/developer-signals/issues/446#issuecomment-3590265077"
  },
  {
   "description": "At Red Hat, we maintain a web-components design system. We need to run cross root aria for cases like this:\n\n```\n<rh-select>\n  <rh-option>...</rh-option>\n```\n\nIn which case rh-select's shadow root has a combobox input, button, and listbox.",
   "url": "https://github.com/web-platform-dx/developer-signals/issues/446#issuecomment-3591754763"
  }
 ],
 "baselineLowDateAsObject": null,
 "baselineHighDateAsObject": null
}