Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Define base appearance for <select> #10629

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

josepharhar
Copy link
Contributor

@josepharhar josepharhar commented Sep 16, 2024

This PR defines the base appearance except for the UA stylesheet for customizable select as proposed in #9799

Base appearance is being defined in CSS here: w3c/csswg-drafts#10691

(See WHATWG Working Mode: Changes for more details.)


/form-elements.html ( diff )
/infrastructure.html ( diff )
/references.html ( diff )
/rendering.html ( diff )

Copy link
Member

@annevk annevk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm missing the base appearance style sheet?

source Outdated Show resolved Hide resolved
source Outdated
<ol>
<li>
<p>For each <var>ancestor</var> of <var>option</var>'s <span
data-x="ancestor">ancestors</span>:</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess the order technically doesn't matter, but seems good to specify still in case of future changes.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I want it to start at option's parent and go up in the tree from there. How should I specify this?

source Outdated
<ol>
<li>
<p>For each <var>ancestor</var> of <var>element</var>'s <span
data-x="ancestor">ancestors</span>:</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here the order seems like it actually matters.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I want it to start at option's parent and go up in the tree from there. How should I specify this?

source Outdated

<p>Whenever an <code>option</code> <var>option</var>'s <span
data-x="concept-option-selectedness">selectedness</span> is set to true, run <span>maybe clone
option into select button</span> given <var>option</var>.</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems weird. Normally changing members doesn't have weird side effects like this.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I moved this to the send select update notifications algorithm

source Outdated

<p>When a <code>select</code> is being rendered as a <span>drop-down box</span> with a <span>base
appearance</span>, it is expected to render as if it has the following <span>shadow
root</span>:</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can't define a shadow root in terms of an HTML syntax fragment.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I rewrote it without using HTML. How does it look?

source Outdated
HTML:</p>

<!-- TODO is it OK for me to use <ul>, <li>, and <p> like this even though it isn't an
algorithm? -->
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the problem is really with how you define the shadow root. If you do that differently this will be different too. But you can use lists outside of algorithms for sure.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I rewrote this and used it to replace the HTML. How does it look?

source Outdated

<p>The <span>implicit anchor element</span> of the <span>select popover</span> element is the
<code>select</code> element shadow host of the shadow host in which <span>select popover</span>
resides.</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can't parse this.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah that was not worded well. I rewrote it, how does it look now?

source Outdated Show resolved Hide resolved
source Outdated

<li><p>Set <var>select</var>'s <span>select popover slot</span>'s <span>manually assigned
nodes</span> to <var>otherChildren</var>.</p></li>
</ol>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why can't we describe this more similarly to the details element?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I replaced this algorithm with some prose at the definition of the slot elements to look more like the details element.

@josepharhar
Copy link
Contributor Author

Thanks for the review! I just pushed a lot of changes.

I'm missing the base appearance style sheet?

I have a separate PR for that here: #10670

I can get rid of that PR and include it in this PR if you'd prefer.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
topic: select The <select> element
Development

Successfully merging this pull request may close these issues.

2 participants