sl-select with html labels

[danielplatt-clx]

Hello,

I'm currently working on a color select dropdown with sl-select.

Here is the code

<sl-select name="artfarbe" id="artfarbe" hoist>
  <sl-menu-item value="" selected>Farbe auswählen</sl-menu-item>
  <sl-menu-item value="640" data-color="/files/farben/7/5/files/farbmuster.jpg">schwarz-euroblau<img slot="prefix" src="/files/farben/7/5/files/farbmuster.jpg">
[...]
  </sl-menu-item>
</sl-select>

When i choose an entry from the select, it only show's it's label:

Is it possible to also set the full html code from sl-menu-item as a label with an easy way?

It should look like this:

Thanks for your help :)

[claviska]

It's designed to generate a plain text label from the menu item.

This is an interesting idea, but if we rendered the same HTML as what's in the menu item then there's no guarantee how it would look in the control. For example, if you had styles targeting sl-menu > sl-menu-item they would affect the menu item in the menu, but not outside of it.

I might consider a function prop that lets you specify the text/HTML you want to render when an item is selected, but that's a bit lower level than I was planning for this component.

[danielplatt-clx]

Hello @claviska :)

is there anything new about that feature request?

We are currently manipulating the label of the sl-select in the shadowroot to add the missing image tag in the label. This is causing weird internal javascript errors in some cases (in the shoelace chunks)

Here is the code of a workaround function to force shoelace to render image tags in sl-select labels.

function setCustomDropdownColorLabel(menuSelect, label, imgSrc) {
     const selectLabel = menuSelect.shadowRoot.querySelector('.select__label')
     selectLabel.innerHTML = '<img style="width: 20px; margin-right: 4px; margin-top: 2px;" src="' + imgSrc + '">' + label;
}

This is one of the most important features that we need in several projects. Are you planning to add it natively in the future?

Thank you :)

Greetings

Daniel

[claviska]

I’m still finishing up theming, but that should be finished early next week. I’d suggest following this issue: #484

It’s still not clear what the best way forward for this would be, but in the meantime, you can probably use <sl-dropdown> to do exactly this. They support the same menu items and the trigger is fully customizable. You’d just have to manage the selected value yourself, which is better than hacking a shadow root.

[danielplatt-clx]

Thx for your fast answer. I will discuss this with my colleagues next week :)

[claviska]

See my comment with example. It turned out to be way simpler with a dropdown. #484 (comment)