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

@caridy Yes, this would be helped by representing component state via custom pseudo-classes. I referenced those in the original post, but I wasn't sure whether those were on a track to happen sooner than basic ::part support.

Note also that I'm talking about letting _parts_, not just overall components, that have state. In the tabs example, the overall tabs doesn't have the selected state, the individual tab buttons have a selected state. In other words, rather than something like:

```css
my-tab-component:state(selected)::part(tab-button) {}
```

I'm more concerned about supporting something like

```css
my-tab-component::part(tab-button):state(selected) {}
```

where the `state` applies to the `part` instead of the component.

> The containing component would not put a part= on the MenuButton, it would put exportparts=. 

@fergald You're correct, thank you for catching that.

I thought it might also be interesting to share some further experimentation here. We've created a working styled variation of our Elix [Tabs](https://component.kitchen/elix/Tabs) component that uses CSS parts.

* [Stock Tabs example](https://component.kitchen/demos/tabs.html)
* [Demo of styled tabs using parts](https://codepen.io/JanMiksovsky/pen/pqexvN?editors=1000). (Requires current Chrome Canary with the Experimental Web Platform Features flag turned on.)

The second demo is the same tabs component as the first, styled using CSS parts. (The only exception is the crossfade effect on the pages, which we achieve by other means not relevant to this discussion.)

We achieved this style tabs demo through a riff on @tabatkins's idea to use multiple parts. Here, we apply one part name ("proxy") to unselected tabs, and a different part name ("proxy-selected") to the selected tab. (Apologies for the ambiguous "proxy" term instead of "tab button" in the demo CSS, but the base class for our Tabs component is actually an extremely general component called [Explorer](https://component.kitchen/elix/Explorer) that is used for much more than just tabs.) Using different part names like that is obviously cumbersome, but works today, and gives us a glimpse of what we'd like to let our component customers achieve through CSS parts.

Although there's still a long road ahead, we're quite excited by being able to do this at all. The stock Tabs (elix-tabs) element looks mundane but provides a large number of features that may not be obvious: keyboard support (via arrow keys while a tab button is selected), ARIA, resilience if tabs are added/removed at runtime, etc. It will be fantastic if someone can receive all those benefits and still get the visual aesthetic they want through CSS.

That said, we remain convinced that some form of per-part styling will be necessary to let customers style our components as they would like. That could take the form of:

1. Support for multiple parts as @tabatkins suggested above.
2. Support for something like `part-attributes` that I proposed above.
3. Support for custom pseudo-classes _and_ the flexibility to specify those after a `::part`.

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

Received on Saturday, 22 December 2018 00:54:53 UTC