W3C home > Mailing lists > Public > public-css-archive@w3.org > February 2019

Re: [csswg-drafts] [css-shadow-parts-1] Can class name selectors apply to a part? (#3431)

From: Amelia Bellamy-Royds via GitHub <sysbot+gh@w3.org>
Date: Sat, 02 Feb 2019 21:11:55 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-459999521-1549141914-sysbot+gh@w3.org>
> As much as I like declarative APIs, trying to define this in an attribute would be a mess.

Belated brain flash: What if we—hear me out, now—used CSS syntax? So states for the custom element could be defined with an `@state` rule in a stylesheet that applies to the shadow tree, similar to @tabatkins's [custom selectors proposal](http://tabatkins.github.io/specs/css-aliases/#custom-selectors).

```css
@state { /* state for the entire widget */
  checked: #checkbox:checked ;
  /* the widget is checked if the shadow element with id `checkbox` is checked */
}
@state drop-down-button { /* state for any element with part="drop-down-button" */
  focus: :focus-within;
  /* the part will match the focus pseudoclass for the outside tree
      if it contains a focused element within the shadow tree */
}
```

If allowing colons inside a value in a declaration-like structure is a syntax issue, the selectors could be wrapped in `{}` to clearly isolate them.

-- 
GitHub Notification of comment by AmeliaBR
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3431#issuecomment-459999521 using your GitHub account
Received on Saturday, 2 February 2019 21:11:56 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:43 UTC