Re: [csswg-drafts] [css-nesting] Make nesting work in `:host` rules (#9496)

• From: Jeroen Zwartepoorte via GitHub <sysbot+gh@w3.org>
• Date: Wed, 20 Nov 2024 14:40:53 +0000
• To: public-css-archive@w3.org
• Message-ID: <issue_comment.created-2488764336-1732113645-sysbot+gh@w3.org>

I'm trying to style a custom element with various status (like `:hover` and `:active`).

I cannot do 
```css
:host([foo]) {
  ...

  &:hover {
    ...
  }
}
```

Instead i have to write
```css
:host([foo]) { ... }
:host([foo]:hover) { ... }
```

This does work, but doesn't win any awards for clean code:
```css
[foo] {
  :host(&) {
    ...
  }
  
  &:hover {
    :host(&) {
      ...
    }
  }
}
```

It would be nice if we could do nesting in combination with `:host` and not have to use the above workarounds.

-- 
GitHub Notification of comment by jpzwarte
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9496#issuecomment-2488764336 using your GitHub account


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

Received on Wednesday, 20 November 2024 14:40:54 UTC