Using sl-select without a "value"

[ourson66]

In standard html "select" popup-menus, the "value" attribute of the "option"s for the select are optional, and the browser will use the displayed menu item text as the select's "value" on form submission. As far as I can see this also works on "sl-select" items from Shoelace, which is a good thing, because I have options which have spaces in them, and the shoelace "sl-option" elements limit the "value" attribute to having no spaces (I understand why). My "sl-option" entries are dynamic, however, meaning that I add the "sl-options" programmatically based on another selection. When I do this, the newly-added options all have their checkmark set, (indicating that they're all selected...?).

Here's a codepen. https://codepen.io/ourson66/pen/NWJqRxL

Using the codepen, open the sl-select initially to see the single "None" value (checked, of course, since it's value is ""). Then click the button to add new items to the sl-select and open it again. All items are checked. More worryingly, if you "inspect" the sl-select, all of the sl-options have their "aria-selected" value set to "true" which makes it difficult to find out which one is actually selected (the first one in this case, since the sl-select's value when queried is showing as "". Is the problem that the first item has a "value" but the rest don't? Short of going back and redesigning my data model so that there is some kind of "ID" that I can put in the "value" attribute for the sl-options, is there a way to make this happen?

[ourson66]

So, actually, if you further play with the control, you can get it so the checkmark is on the selected item, and then, unfortunately if you ask for the sl-select's value, it always returns an empty string. So the situation is actually more complex, in that you MUST have a "value" attribute for your sl-options (which cannot have spaces in it) or else the entire select fails to capture any values.