Best practice for sl-dropdown menu item text wrap

[SabineWren]

I have a dropdown with highly variable option text length, so sometimes the menu must expand wider than the trigger button and then text wrap.

The menu items don't expand with white-space: normal; unless inside a container with a fixed width. That is, I haven't found a CSS solution to make the option expand up to a max-width before wrapping, unless there's a fixed-width container.

Shoelace doesn't expose the menu container, and if I style the menu directly, I get white padding at a fixed width. My current hack is to use JavaScript to style Shoelace internals.

override firstUpdated() {
	const style = document.createElement("style")
	style.innerHTML = `
.dropdown__positioner { display: flex; width: 35rem; }`
	$(this, "sl-dropdown").shadowRoot.prepend(style)
}

Clearly that's not a good solution, so maybe there's a CSS approach that works with the existing Shoelace API. Note that my solution also conflicts with dropdown placement, so placement="bottom-end" requires an additional flex-direction: row-reverse; on the .dropdown__positioner.

[claviska]

Try targeting the menu item's label.

sl-menu-item::part(label) {
  width: max-content;
  max-width: 400px;
  white-space: normal; 
}

Example

I think it's reasonable (and good UX) to provide a maximum width. The max-content handles the rest.