Best way to make the panel width 100% for sl-dropdown

[Jaylyn-Barbee]

I have the trigger 100%, but I can't get the panel to match that size.

html for reference

[claviska]

Dropdowns accept an arbitrary trigger, so you'd need to size the panel to match the trigger and keep it in sync as it resizes. To do this right, you'll need a resize observer and some JavaScript.

If you were using <sl-select> you'd get that for free: https://shoelace.style/components/select

[diervo]

I was running into a similar issue as I wanted to create a custom dropdown content. I was able to make it work without any javascript purely using container queries, in case this will be useful for someone else:

sl-dropdown {
  width: 100%;
  container-type: inline-size;
  
  .custom-content {
    width: 100cqw;
  }
}