[csswg-drafts] [css-ui] Pseudo-elements for stylable select (#10462)

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

== [css-ui] Pseudo-elements for stylable select ==
Assuming that the shadowroot structure from https://github.com/w3c/csswg-drafts/issues/10380 is accepted, then I would like to propose pseudo-elements to target the elements inside the shadowroot. This will provide authors (and the UA stylesheet) the ability to style all of the content even without changing the markup to use any of the new content model (@brechtdr has mentioned this use case several times). 

It would also be ideal for these pseudo-elements to target either the "fallback" element inside the UA shadowroot or the author provided element which gets slotted in depending on which one is rendered. For example, `::select-button` could target `<button pseudo="select-fallback-button">` in the UA shadowroot, or if the author provides a `<button>`, then the author-provided one instead. This has been requested in OpenUI but I haven't implemented it in the prototype yet because it is a bit harder to implement.

Here is the proposed structure from https://github.com/w3c/csswg-drafts/issues/10380 which I have implemented in the chromium prototype:
```html
<select>
  #shadow-root
    <slot id="select-button">
      <button pseudo="select-fallback-button">
        <span pseudo="select-fallback-button-text"></span>
        <div pseudo="select-fallback-button-icon">
          <svg viewBox="0 0 20 16" fill="none"><path d="M4 6 L10 12 L 16 6"></path></svg>
        </div>
      </button>
    </slot>
    <slot id="select-datalist">
      <datalist pseudo="select-fallback-datalist">
        <slot id="select-datalist-options"></slot>
      </datalist>
    </slot>
</select>
```

Here is a list of pseudo-elements which would make all this content targetable:

1. The button

We could have `select::select-button` which would target `<button pseudo="select-fallback-button">` if the author doesn't provide a `<button>`, or the `<button>` if one is provided by the author.

2. The fallback button's text

We could have `select::select-fallback-button-text` or `select::select-button-text` to target `<span pseudo="select-fallback-button-text">` in the UA shadowroot. The UA stylesheet I've currently implemented [applies a couple rules](https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/html/resources/stylable_select.css;l=174-182;drc=58da1c3cc1807d7f1c00905718b8bb83658607ca) to this span. I'm not sure it makes sense to find a way to apply this to any author-provided elements.

3. The fallback button's svg icon

We could have `select::select-fallback-button-icon` or `select::select-button-icon` to target `<div pseudo="select-fallback-button-icon">`. As with the fallback button text, I'm not sure that it makes sense to find a way to map this pseudo-element to any author provided elements.

4. The datalist

We could have `select::select-datalist` to target `<datalist pseudo="select-fallback-datalist">` if the author doesn't provide a `<datalist>`, or the `<datalist>` if the author provides one. Based on feedback from @annevk it sounds like this should be called `::picker(???)` instead.

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


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

Received on Monday, 17 June 2024 22:46:33 UTC