Skip to content

[css-ui] Pseudo-element for select's UA popover #10758

@josepharhar

Description

@josepharhar

Customizable <select> will have a popover element inside the UA shadowroot for the picker. We need a pseudo-element to target this element, and it needs a name and some supported capabilities.

We recently discussed removing the capability for the author to provide their own popover element as a <datalist> in OpenUI here, which means that this pseudo-element will only be for the UA shadowroot popover rather than possibly also being for an author-provided element.

For the name, the chromium prototype implementation currently has ::select-fallback-datalist (this name would need improvement), but I imagine based on this issue that some people would like for it to be called ::picker(select).

One capability which I know will be needed is popover / top layer animations. In order to support this, we need this pseudo-element to support the :popover-open pseudo-class and some other things so that the following code works when in base appearance mode:

select::select-fallback-datalist {
  transition: display 1s allow-discrete, overlay 1s allow-discrete, opacity 1s;
  opacity: 0;
}

select::select-fallback-datalist:popover-open {
  opacity: 1;
}
@starting-style {
  select::select-fallback-datalist:popover-open {
    opacity: 0;
  } 
}

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions