{
 "compat_features": [
  "css.selectors.has-slotted"
 ],
 "description": "The :has-slotted CSS pseudo-class matches <slot> elements where the fallback content is not shown. The pseudo-class matches any slotted content, including white space, text nodes, or elements.",
 "description_html": "The <code>:has-slotted</code> CSS pseudo-class matches <code>&#x3C;slot></code> elements where the fallback content is not shown. The pseudo-class matches any slotted content, including white space, text nodes, or elements.",
 "group": [
  "selectors",
  "web-components"
 ],
 "kind": "feature",
 "name": ":has-slotted",
 "spec": [
  "https://drafts.csswg.org/css-shadow-1/#the-has-slotted-pseudo"
 ],
 "status": {
  "baseline": false,
  "by_compat_key": {
   "css.selectors.has-slotted": {
    "baseline": false,
    "support": {
     "firefox": "136",
     "firefox_android": "136"
    }
   }
  },
  "support": {
   "firefox": "136",
   "firefox_android": "136"
  }
 },
 "id": "has-slotted",
 "groups": [
  "selectors",
  "web-components"
 ],
 "specs": [
  {
   "url": "https://drafts.csswg.org/css-shadow-1/#the-has-slotted-pseudo",
   "seriesComposition": "full",
   "shortname": "css-shadow-1",
   "series": {
    "shortname": "css-shadow",
    "currentSpecification": "css-shadow-1",
    "title": "CSS Shadow",
    "shortTitle": "CSS Shadow",
    "nightlyUrl": "https://drafts.csswg.org/css-shadow/"
   },
   "seriesVersion": "1",
   "formerNames": [
    "css-scoping-1",
    "css-shadow-parts-1"
   ],
   "organization": "W3C",
   "groups": [
    {
     "name": "Cascading Style Sheets (CSS) Working Group",
     "url": "https://www.w3.org/groups/wg/css/"
    }
   ],
   "nightly": {
    "url": "https://drafts.csswg.org/css-shadow-1/",
    "status": "Editor's Draft",
    "alternateUrls": [
     "https://w3c.github.io/csswg-drafts/css-shadow-1/",
     "https://w3c.github.io/csswg-drafts/css-shadow/"
    ],
    "repository": "https://github.com/w3c/csswg-drafts",
    "sourcePath": "css-shadow-1/Overview.bs",
    "filename": "index.html"
   },
   "title": "CSS Shadow Module Level 1",
   "source": "spec",
   "shortTitle": "CSS Shadow 1",
   "categories": [
    "browser"
   ],
   "standing": "good",
   "tests": {
    "repository": "https://github.com/web-platform-tests/wpt",
    "testPaths": [
     "css/css-shadow"
    ]
   },
   "fragment": "the-has-slotted-pseudo"
  }
 ],
 "mdnUrls": [
  {
   "slug": "Web/CSS/Reference/Selectors/:has-slotted",
   "title": "`:has-slotted` CSS pseudo-class",
   "anchor": null,
   "url": "https://developer.mozilla.org/docs/Web/CSS/Reference/Selectors/:has-slotted"
  }
 ],
 "standardPositions": [
  {
   "vendor": "mozilla",
   "url": "https://github.com/mozilla/standards-positions/issues/1079",
   "position": "positive",
   "concerns": []
  },
  {
   "vendor": "apple",
   "url": "https://github.com/WebKit/standards-positions/issues/404",
   "position": "support",
   "concerns": []
  }
 ],
 "hasNegativeStandardPosition": false,
 "stateOfSurveys": [
  {
   "name": "State of HTML 2025",
   "url": "https://2025.stateofhtml.com/en-US/features/web_components/#web_components_features",
   "question": "web_components",
   "subQuestion": "web_components_features",
   "path": "dataAPI.surveys.state_of_html.html2025.web_components.web_components_features.10.entity"
  },
  {
   "name": "State of HTML 2025",
   "url": "https://2025.stateofhtml.com/en-US/features/#all_features",
   "question": "features",
   "subQuestion": "all_features",
   "path": "dataAPI.surveys.state_of_html.html2025.features.all_features.52.entity"
  },
  {
   "name": "State of HTML 2025",
   "url": "https://2025.stateofhtml.com/en-US/_all_features/#all_features",
   "question": "_all_features",
   "subQuestion": "all_features",
   "path": "dataAPI.surveys.state_of_html.html2025._all_features.all_features.52.entity"
  }
 ],
 "chromeUseCounters": {},
 "interop": [],
 "wpt": {
  "url": "https://wpt.fyi/results?q=feature:has-slotted"
 },
 "developerSignals": {
  "url": "https://github.com/web-platform-dx/developer-signals/issues/276",
  "votes": 43
 },
 "bugs": {
  "chrome": [
   "https://issues.chromium.org/issues/369883705"
  ]
 },
 "useCases": [
  {
   "description": "Styling on slotted content is a major facet of the composition story in custom elements leveraging shadow DOM. Sometimes it's just a matter of a little bit of extra spacing you'd like to included when there's additional content (like in a button with text _and_ an icon, instead of just text), but other times it's lighting up whole other features due to the slotted contents on the element and being able to do all of these things without JS would be amazing",
   "url": "https://github.com/web-platform-dx/developer-signals/issues/276#issuecomment-3589597575"
  },
  {
   "description": "I maintain the Lit SSR library. When our users need to style an element based on whether certain slots are filled, they have to use JavaScript to do it. We don't support the slot API in Lit SSR - we just emit declarative shadow DOM with whatever `<slot>`s they have, emit the light DOM, and let the browser do projection. Supporting slots would be very complicated and hurt performance. It would involve parsing HTML, changing our streaming approach (we'd have to delay emitting shadow roots), and performing slot assignment ourselves.\n\nInstead we just don't support these use cases. These types of components just don't style correctly until JS loads and the components hydrate.\n\n`:has-slotted` would let our users eliminate this JS and SSR'ed components to style correctly when they have slotted content, before JS loads.",
   "url": "https://github.com/web-platform-dx/developer-signals/issues/276#issuecomment-3590246620"
  },
  {
   "description": "At red hat, we maintain a web components design system, in which we have elements like\n\n```\n<rh-card>\n  <h2 slot=header>...</h2>\n  <p>...<p>\n  <rh-button slot=footer>...</rh-button>\n</rh-card>\n```\nNot every card instance has content in the named slots, so we need to hide those slots in the case that they're empty:\n\n```css\n#footer :has-slotted(*) {\n  display: none;\n}\n```",
   "url": "https://github.com/web-platform-dx/developer-signals/issues/276#issuecomment-3591757791"
  }
 ],
 "baselineLowDateAsObject": null,
 "baselineHighDateAsObject": null
}