[csswg-drafts] [css-nesting] Interaction with :host is unfortunate. (#9509)

emilio has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-nesting] Interaction with :host is unfortunate. ==
This test-case ([live](https://www.software.hixie.ch/utilities/js/live-dom-viewer/saved/12071)) doesn't produce the expected behavior (purple) in any browser:

```html
<!doctype html>
<div id="host">Something</div>
<script>
  host.attachShadow({ mode: "open" }).innerHTML = `
    <style>
      :host {
        background-color: green;
      }
      div {
        background-color: red;
        display: inline-block;
        width: 12px;
        height: 12px;
      }
      :host(#host) div {
        background-color: blue;
      }
      :host(#host) {
        div {
          background-color: purple;
        }
      }
    </style>
    <slot></slot>
    <div></div>
  `;
</script>
```

This is because per spec, the host only matches featureless `:host` selectors, and the `&` (or `:is(:host(..))` for that matter) isn't that.

This is similar to #9153 / #9492 (cc: #8738).

cc: @tabatkins @andruud @mdubet @LeaVerou @fantasai

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9509 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 21 October 2023 13:15:09 UTC