Re: [csswg-drafts] Ability to style <details>/<summary> to be open (e.g. for print styles) (#2084)

• From: Jonathan Neal via GitHub <sysbot+gh@w3.org>
• Date: Mon, 14 Nov 2022 17:16:15 +0000
• To: public-css-archive@w3.org
• Message-ID: <issue_comment.created-1314107759-1668446173-sysbot+gh@w3.org>

With the [recent additions](https://www.w3.org/TR/selectors/#open-state) of `:open` and `:closed`, I believe usage of the proposed pseudo-elements (for the shadow slot for details summary and for the shadow slot for details content) would look like this:

```css
::details-content {
  /* styles the shadow slot for details content */
}

::details-summary {
  /* styles the shadow slot for details summary */
}

:open::details-summary {
  /* styles the shadow slot for details summary when it is open */
}

:closed::details-summary {
  /* style the shadow slot for details summary when it is closed */
}

:open::details-content {
  /* styles the shadow slot for details content when it is open */
}

:closed::details-content {
  /* styles the shadow slot for details content when it is closed */
}
```

The `:open` & `:closed` pseudo-states would select LightDOM elements (like `<details>`) matching either state, while the `::details-summary` & `::details-content` pseudo-elements would then cross the shadow boundary and select the shadow elements matching either term within `<details>`.

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


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

Received on Monday, 14 November 2022 17:16:17 UTC