select: Naming of <selectedoption>

[jakearchibald]

Sorry, I know bikeshedding is painful, but it's really awkward that "the <selectedoption>" and "the selected <option>" are different things, even though they sound the same verbally.

Try saying "the <selectedoption> contains a clone of the content of the selected <option>" out loud. You need to say something like "the <selectedoption> contains a clone of the content of the <option> that is selected" to make it understandable, but that also sounds weird.

It's a problem in code too:

const selectedOption = select.selectedOptions[0];
const selectedOption = select.querySelector('selectedoption');

[lukewarlow]

For context here's the original discussion on naming: #808

There were a few proposals. I liked value or selectedvalue but it was pointed out that's not quite right because it's not actually the value. selected is perhaps too ambiguous?

There's no prior art from which to base the naming off unfortunately.

Potentially worth considering what might the element look like for select multiple in future?

[jakearchibald]

<selectedcontent> is the best I've got.

[brucelawson]

<selection> ?

…

On Fri, 18 Oct 2024 at 12:41, Jake Archibald ***@***.***> wrote: <selectedcontent> is the best I've got. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

-- Bruce Lawson www.brucelawson.co.uk @***@***.***

[smhigley]

<selection> feels a little close to text selection to me 😅

I kinda like <selectedcontent> in that it makes it a little more intuitive that it's a semantically generic container mirroring the content of the selected option, and not literally a semantic option nested inside the button.

[jakearchibald]

I've seen a few folks that think <selectedoption> is a replacement for <option selected>, which is totally understandable.

[josepharhar]

I agree, <selectedoption> verbally conflates with "selected <option>" really badly. <selectedcontent> sounds good to me.

[sorvell]

What about repurposing the <output> element for this?

It probably doesn't work, but it seems at least conceptually similar since it's primarily displaying the result of a user action.

[jakearchibald]

That feels like a pretty big semantic switch.

[sorvell]

claude.ai thinks choice is the strongest option:

<select>
  <button>
    <choice>Apple</choice> <!-- automatically updates when selection changes -->
  </button>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
</select>

choice works well because it:

1. Is distinct from other select-related terms
2. Clearly represents its purpose
3. Is short and simple
4. Isn't easily confused with existing properties
5. Makes semantic sense in the context

[josepharhar]

Here is our previous thread on naming, where we renamed it from <selectedvalue> to <selectedoption>: #808

I'd rather not use <output> for this since it already has semantics/behaviors.

I like <selectedcontent> because it represents the content of the currently selected option. <choice> sounds a bit vague by comparison.

[brechtDR]

+1 on slectedcontent

[css-meeting-bot]

The Open UI Community Group just discussed select: Naming of <selectedoption>, and agreed to the following:

• RESOLVED: rename the selectedoption element to selectedcontent

The full IRC log of that discussion

<frehner> Hoping to gain enough context in the next couple of sessions to start scribing :)
<gregwhitworth> jarhar: selectedcontent will be the new name for selectedoption
<gregwhitworth> masonf: the name is confusing currently and my initial position and in programming it can be confusing. Using it as your first option in select and "oops it didn't work"
<gregwhitworth> q+
<gregwhitworth> ack gregwhitworth
<gregwhitworth> steve: Jake voted for selectedcontent as well
<gregwhitworth> steve: to level set this is not a final solution
<gregwhitworth> masonf: we don't make final decisions here but make recommendations
<masonf> q+
<gregwhitworth> steve: only issue is that the name is verbose and long and it seems odd that the parent element is the name
<gregwhitworth> steve: I do agree with Jake that it is quite confusing and only concern is it is long
<gregwhitworth> steve: it solves the primary problem
<gregwhitworth> masonf: it is selected and not select so it is slight variation. This is clear that it is just the content and not the option
<jarhar> q?
<masonf> ack mason
<gregwhitworth> ack masonf
<bkardell_> the output paradigm would be more useful if anyone outside this chat knew about <output> ;)
<masonf> <output> is form associated, which adds even more stuff to deal with
<jarhar> proposed resolution: rename the selectedoption element to selectedcontent
<masonf> +1
<bkardell_> +1
<gregwhitworth> +1
<sarah> +1
<scott> +1
<jarhar> RESOLVED: rename the selectedoption element to selectedcontent