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.
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
Invalid example
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.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.