Shoelace.style dropdown panel sizing

Question

I am looking for the way to set the shoelace dropdown panel width @100%, similar to the trigger button. Here is my code (pen). Only the trigger button resizes, not the panel. Any thoughts?

<div class="wrapper">
  <div class="dropdown-selection">
    <sl-dropdown>
      <sl-button slot="trigger" caret>Edit</sl-button>
      <sl-menu>
        <sl-menu-item value="cut">Cut</sl-menu-item>
        <sl-menu-item value="copy">Copy</sl-menu-item>
        <sl-menu-item value="paste">Paste</sl-menu-item>
      </sl-menu>
    </sl-dropdown>
  </div>
</div>

CSS

.wrapper {
  width: 300px;
}

sl-dropdown, sl-button, sl-dropdown::part(panel)  {
  width: 100%;
}

Answer 1

The problem is that the menu isn't the child of the Edit button. That means that the menu doesn't try to adjust its width to that of the Edit button. To fix this issue I changed the .wrapper selector to .wrapper, sl-menu.

This is the final code.

@import 'https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/themes/light.css';

.wrapper, sl-menu {
  width: 300px;
}

sl-dropdown, sl-button, sl-dropdown::part(panel)  {
  width: 100%;
}

<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/shoelace.js"></script>

<div class="wrapper">
  <div class="dropdown-selection">
    <sl-dropdown>
      <sl-button slot="trigger" caret>Edit</sl-button>
      <sl-menu>
        <sl-menu-item value="cut">Cut</sl-menu-item>
        <sl-menu-item value="copy">Copy</sl-menu-item>
        <sl-menu-item value="paste">Paste</sl-menu-item>
      </sl-menu>
    </sl-dropdown>
  </div>
</div>