How to use a compound selector in CSS pseudo-class function :host-context(<selector>)

In the :host-context() - MDN DOcs it is stated that:

The :host-context() CSS pseudo-class function selects the shadow host of the shadow DOM containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host's ancestor(s) in the place it sits inside the DOM hierarchy. In other words, this allows a custom element, or anything within that custom element's shadow DOM, to apply different styles based on its position within the outer DOM or classes/attributes applied to ancestor elements.

The problem though is that in the live example provided the :host-context(article, aside) { color: gray; } statement does not apply. Similarly, if I try to add other compound selectors that are space separated like :host-context(h1 a){ background: orange} I get the same issue of it not being applied.

Here are the examples given from the docs page

/* Selects a shadow root host, only if it is
   a descendant of the selector argument given */
:host-context(h1) {
  font-weight: bold;
}

:host-context(main article) {
  font-weight: bold;
}

/* Changes paragraph text color from black to white when
   a .dark-theme class is applied to the document body */
p {
  color: #000;
}

:host-context(body.dark-theme) p {
  color: #fff;
}

Does anyone know why this is happening or how I can get space separated selectors like descendant selectors to work as parameters in the :host-context() pseudo-class function?

I am expecting the :host-context() pseudo-class function to work with a parameter that is a space separated compound selector like h1 a since that is what is described in the docs page.

Thank you.

Solution

This was invalid code in the MDN example. A <compound-selector> or <simple-selector> are the only types that are accepted.

I made the change and the pull request was approved

Description

Removed invalid examples from docs.

Syntax from Docs

:host-context(<compound-selector>) {
  /* ... */
}

Invalid Examples

:host-context(article, aside) { color: gray; }

This is not valid because the argument provided to the :host-context() pseudo-class function is not a <compound-selector>. Rather, it is a "selector list" which is invalid and does not work in the live example.

:host-context(main article) {
  font-weight: bold;
}

This is not valid because the argument provided to the :host-context() pseudo-class function is not a <compound-selector>. Rather, it is a <complex-selector> which is invalid and does not work in the live example.

This is explained in the Structure of a Selector - CSS Selectors - MDN Docs Page

Motivation

The invalid CSS caused confusion when looking at the live example