[csswg-drafts] "Single content, multiple renderings" feature for `<selectlist>` (#9284)

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

== "Single content, multiple renderings" feature for `<selectlist>` ==
Please see [this comment in OpenUI](https://github.com/openui/open-ui/issues/571#issuecomment-1696637459) for more of the background for this question. But the TL;DR is that for the `<selectlist>` element, there's a need for the currently-selected option to be rendered in two different places: once in the popover listbox, and once in the page. And there's further a need to be able to style these differently. Commonly, the listbox contains a different presentation of the same content - for example, more details in the listbox, and a smaller summary in the in-page control once selected.

The [OpenUI comment](https://github.com/openui/open-ui/issues/571#issuecomment-1696637459) goes through several different ways to achieve this "single content, multiple renderings" feature for `<selectlist>`. The top contender is just to call `cloneNode()` on the content from the `<option>`, to copy it into the in-page control, so there really are two concrete copies of that content, which can then be styled with normal CSS. That approach meets the use case very nicely, and is implementable, but would be a new "thing" for the platform. However, one other suggestion (which falls under the "Magic Mirroring" heading) is to have some way for the DOM content to live in only one location, but get rendered in two places, with different styling applied to each place. This CSSWG issue asks the question: is there a way to do that?

One suggestion (not listed in the comment) is to give the `<selectlist>` two pseudo classes, which can be used to match the "two faces" of that content:

```html
<selectlist>
  <option>
    <span class=foo>Some rich content</span>
  </option>
</selectlist>

<style>
  option:selected-in-listbox .foo {
    /* Styles applied to .foo for the listbox "version" of .foo */
  }
  option:selectedvalue {
    /* Styles applied to .foo for the in-page "version" of .foo */
  }

  /* Note that BOTH of the above selectors can match at the same time,
    and that they target two different rendered versions of a single
    reified `<span class=foo>` element. */
</style>
```

From a developer point of view, this meets the use case - I get two "magic" copies of `<span class=foo>` and I can address each of them via CSS to style them differently. What it leaves out is the "how". I'm not sure how we would spec or implement such a behavior. But I thought I'd open an issue here to discuss the general problem and this particular idea to see if it has legs.

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


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

Received on Thursday, 31 August 2023 17:24:24 UTC