Open josepharhar opened 5 months ago
@josepharhar how does the selected item fit into this?
<span pseudo="select-fallback-button-text"></span>
has its text content replaced with the text content of the currently selected <option>
. If the author provides their own <button>
which is slotted into <slot id="select-button">
, then the author can put <selectedoption>
inside the <button>
they provided.
Is there a specific issue to discuss the pseudo-elements? I think we want the same pseudo-elements for the "new" and "old" markup, which goes against the pseudo
attributes suggested here, but it's a bit unclear if you wanted that discussion to be separate.
Is there a specific issue to discuss the pseudo-elements? I think we want the same pseudo-elements for the "new" and "old" markup, which goes against the pseudo attributes suggested here, but it's a bit unclear if you wanted that discussion to be separate.
I created this issue to get consensus on the idea of having a shadowroot with this structure and slotting algorithm which can be used for appearance:base, which seemed big enough to have its own discussion. I created another issue for pseudo elements here: https://github.com/w3c/csswg-drafts/issues/10462
I'm not sure about the inline <svg viewBox="0 0 20 16" fill="none"><path d="M4 6 L10 12 L 16 6"></path></svg>
... the icon needs to respond to writing modes. And we should make it easy to change via CSS.
Maybe injecting the disclosure-open
counter style would work?
Instead of using an SVG, perhaps we could use a unicode character like this one instead? ⌄
The CSS Working Group just discussed [css-ui] DOM/Box structure for appearance:base-select
, and agreed to the following:
RESOLVED: <select> internals can be represented with shadow DOM (but shadow DOM support is not required as long as the behavior is the same)
RESOLVED: Accept shadow dom structure as proposed initial comment in the issue, except for the svg part and naming of pseudo elements. issues to be opened for those
@fantasai noted that perhaps <div pseudo="select-fallback-button-icon">
should also be a span like <span pseudo="select-fallback-button-text">
. I likely did this due to the UA styles of divs vs spans, and I agree it should probably be a span instead. The content of this part is also subject to change based on how we design the dropdown indicator to not be an svg
Instead of using an SVG, perhaps we could use a unicode character like this one instead? ⌄
The problem with using unicode
characters is how to maintain consistency of presentation across OS?
I mentioned here the technique of using @font-face
to load a custom font, not sure if it works inside the browser.
Maybe injecting the disclosure-open counter style would work?
I am implementing this in the prototype here: https://chromium-review.googlesource.com/c/chromium/src/+/5660759
I'm having a hard time getting select::select-fallback-button::after
to work in author stylesheets, but other than that it seems good to me.
Maybe injecting the disclosure-open counter style would work?
@fantasai does this seem like what you were thinking of?
select::select-fallback-button::after {
padding-inline-start: 0.5em;
}
select:open::select-fallback-button::after {
content: counter(foo, disclosure-open);
}
select:not(:open)::select-fallback-button::after {
content: counter(foo, disclosure-closed);
}
Maybe injecting the disclosure-open counter style would work?
@fantasai does this seem like what you were thinking of?
select::select-fallback-button::after { padding-inline-start: 0.5em; } select:open::select-fallback-button::after { content: counter(foo, disclosure-open); } select:not(:open)::select-fallback-button::after { content: counter(foo, disclosure-closed); }
I'm going to implement this in the prototype now before re-architecting the button in response to https://github.com/w3c/csswg-drafts/issues/10717
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: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:<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:<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: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.