[csswg-drafts] [css-ui] DOM/Box structure for appearance:base-select (#10380)

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

== [css-ui] DOM/Box structure for appearance:base-select ==
Now that we have decided in https://github.com/w3c/csswg-drafts/issues/5998 to use CSS to opt into the stylable/interoperable mode for `<select>`, we should figure out what the DOM/box structure should be.

In the OpenUI design and chromium implementation, there is a closed UA shadowroot on `<select>` which gets rendered when appearance:base-select is set:
```html
<select>
  #shadow-root
    <!-- There are additional proprietary elements here which are only
         used for appearance:auto/none mode. They aren't included in the
         layout tree when appearance:base-select is set, and likewise,
         the below elements aren't included in the layout tree in
         appearance:auto/none mode. -->

    <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 mapping of which children of `<select>` will be slotted into the `<slot>`s in the structure above:
- `<slot id="select-button">`: The first `<button>` child of `<select>`. This represents the in-page button which opens the popup containing options. If the author doesn't provide a button, then `<button pseudo="select-fallback-button">` gets rendered instead. Here is an example of author HTML which would use this slot:
  ```html
  <select>
    <button>i am slotted into id=select-button!</button>
  </select>
  ```
- `<slot id="select-datalist">`: The first `<datalist>` child of `<select>`. This represents the popup containing options, which is implemented as a popover anchored to the button. If the author doesn't provide a datalist, then `<datalist pseudo="select-fallback-datalist"> is rendered instead. Here is an example of author HTML which would use this slot:
  ```html
  <select>
    <datalist>i am slotted into id=select-datalist!</datalist>
  </select>
  ```
- `<slot id="select-datalist-options">`: All other child elements of `<select>` which aren't assigned into the button or datalist slots. This slot is only rendered if the author doesn't provide a datalist element. Here is an example of author HTML which would use this slot:
  ```html
  <select>
    <option>I am slotted into id=select-datalist-options!</option>
    <optgroup>I am also slotted into id=select-datalist-options!</optgroup>
  </select>
  ```

All of the elements here with the proprietary `pseudo` attribute are mapped to pseudo-elements so that they can be targeted by the author in CSS, but we can discuss that later as I'd like to scope this issue down to the general structure.

I believe that WebKit and Gecko don't currently have a ShadowRoot attached to `<select>`, but I'm not sure if this whole structure I've proposed is implementable without it. I am hoping that adding a ShadowRoot to `<select>` would not impact the existing behavior of appearance:auto/none `<select>` in WebKit/Gecko.

I would like to get a resolution that the above ShadowRoot structure and slotting algorithms for `<select>` should be used in order to support appearance:base-select.

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


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

Received on Thursday, 30 May 2024 20:41:38 UTC