Support ":host" selector

[doits]

The following css works:

:root {
  --some-variable: #f00;
}

But once a :host is added it breaks:

:root, :host {
  --some-variable: #f00;
}

WARNING: Invalid or unsupported selector, ':root,:host'

--some-variable is not available anymore.

Same goes for selectors like html, :host etc..

I think it should simply ignore :host (which has no meaning here because there is no shadow dom afaik) but apply the remaining ones (:root and html in my example).

[liZe]

Hi, and thanks for the bug report!

:host is not supported (yet!) by WeasyPrint.

I think it should simply ignore :host (which has no meaning here because there is no shadow dom afaik) but apply the remaining ones (:root and html in my example).

This behavior is actually correct and specified, all browsers do the same for selectors they don’t support. You can for example try :root, :unsupported { color: blue } and see that all browsers display black text. So, that’s not a bug in the way we handle selectors, that’s "just" a missing feature.

If you want WeasyPrint to support CSS Scoping (that defines :host), we can move this issue to cssselect2 where it belongs.

[doits]

Thanks for the information! I didn't know this is well defined behaviour, sorry for the noise. This can be closed then.

---

The background for this issue is that a css genarator (tailwindcss v4) is generating css with :host selectors. It has some other incompatibilities by default, but with some tailwindcss tweaks I can get it to work with the one exception of the :host selector: It outputs selectors like :root, :host { and there isn't an option not to output :host. Right now I simply run a regexp over the generated css (s/, :host {/ {/), which I think I have to continue for the time being.

[liZe]

The background for this issue is that a css genarator (tailwindcss v4) is generating css with :host selectors. It has some other incompatibilities by default, but with some tailwindcss tweaks I can get it to work with the one exception of the :host selector: It outputs selectors like :root, :host { and there isn't an option not to output :host. Right now I simply run a regexp over the generated css (s/, :host {/ {/), which I think I have to continue for the time being.

Thanks a lot for sharing this information. :host is supported by browsers since 2016~2018, it will probably be used by many other frameworks and we should support it in cssselect2. Let’s move this issue over there.