Learn how to effectively use compound selectors in CSS pseudo-class functions: host-context(<selector>)

Question

In the MDN documentation, :host-context() is defined as:

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

The problem is that in the live example provided, the :host-context(article, aside) { color: gray; } statement does not work. Likewise, if I try to add other space-delimited compound selectors like :host-context(h1 a){ background: orange}, I run into the same problem.

The following is the example given in the documentation page:

/* 仅选择影子根主机，前提是它是选择器参数的后代 */
:host-context(h1) {
  font-weight: bold;
}

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

/* 当在文档主体上应用 .dark-theme 类时，将段落文本颜色从黑色更改为白色 */
p {
  color: #000;
}

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

Does anyone know why this is happening, or how to make space-delimited selectors (such as descendant selectors) work in the parameters of the :host-context() pseudo-class function?

I expected the :host-context() pseudo-class function to be able to take a space-separated compound selector similar to h1 a as an argument, because that's how it's described in the documentation page.

Thanks.

Answer 1

This is invalid code from the MDN example. Only <compound-selector> or <simple-selector> are accepted types.

I made the changes and this pull request has been approved.

---

describe

Removed invalid examples from documentation.

Syntax in documentation

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

Invalid example

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

This is invalid because the argument supplied to the :host-context() pseudo-class function is not <compound-selector>. Instead, it's a "selector list", which is invalid and won't work in a real example.

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

This is invalid because the argument supplied to the :host-context() pseudo-class function is not <compound-selector>. Instead, it's a <complex-selector>, which is invalid and won't work in real examples.

This is explained in the Structure of Selectors - CSS Selectors - MDN Documentation page.

motivation

Invalid CSS can cause confusion when looking at actual examples.