Open josepharhar opened 1 month ago
Using ::marker was also mentioned, but I imagine it would make things harder since it has logic tied to list item rendernig that I imagine could be hard to work around.
Some things I'd like to resolve on, in this order:
The CSS Working Group just discussed [css-ui] Pseudo-elements for checkmark and dropdown icon for appearance:base `<select>`
, and agreed to the following:
RESOLVED: create new pseudo elements for checkmark and dropdown icon for base appearance select instead of using ::before and ::after in the UA stylesheet
ACTION: Tab and fantasai to make better words for this in the css-pseudo spec
The CSS Working Group just discussed [css-ui] Pseudo-elements for checkmark and dropdown icon for appearance:base `<select>`
, and agreed to the following:
RESOLVED: forms pseudo-elements are at least tree-abiding (open question about whether part-like)
From an implementation point of view, I would prefer to make these like ::before and ::after because I want the content property to work on them, and if it has a backing element in the UA shadowroot then I don't think I can easily make the content property work on them easily due to the current state of chromium.
I don't know whether that means they should be "part-like" or not, but I at least want to think of them as being "before-like"
I created a PR to define them as ::check and ::select-arrow here: https://github.com/w3c/csswg-drafts/pull/10986
I copied the functionality of ::before/::after and made them part-like pseudo-elements.
Maybe we should consider using the same model as ::select-arrow
for the ::marker
in the details element. This would avoid many of the limitations of ::marker
.
I copied the functionality of ::before/::after and made them part-like pseudo-elements.
In the PR, I changed them from part-like pseudo-elements to tree-abiding pseudo-elements which accept all properties.
Proposed resolution: Add tree-abiding pseudo-elements which accept all properties called ::check
and ::select-arrow
for the option checkmark and select drop-down icon
Not sure where the IRC notes went, but this was in them:
ACTION: jarhar to open an issue to determine if pseudo elements (yet to be named) are tree-like or element-like
I think they should be "tree-like" according to this sentence.
It sounded like there was an issue raised about the CSS spec itself not being well defined enough for us to add a pseudo-element for this, and that we should be consistent between the new pseudo-elements we are adding like ::picker and this thing.
I think that ::picker should be "part-like" or "element-backed" because it is a real element in the UA shadowroot which has a popover attribute and a slot inside it to slot child nodes of the select into.
These new elements are intended to replace the ::before and ::after rules I proposed, and all they do is render what we want to put in the content property, so they should not be part-like or element-backed.
I don't understand the concern that these aren't defined well enough. ::picker is an element-backed pseudo-element. Is this not well defined?
These new pseudo-elements should be "fully stylable pseudo-elements", just like ::before and ::after. This also seems very well defined to me.
In this issue, I proposed putting
option::before
in the UA stylesheet to create checkmarks andselect::after
to create a dropdown icon.It was suggested that we could create new pseudo-elements for these instead like
::check
and::select-arrow
.I used ::before and ::after because it was simpler than creating new pseudo-elements. If we do create new pseudo-elements, then we need to at least make sure that its easy for authors to completely disable their rendering - which can be done with the ::before/::after solution by putting display:none on them.
(not sure if css-ui is the right spec for this, but maybe that depends on what solution we choose)