when appendToBody is true styles are not applied to the dropdown menu

[kostatsv]

When appendToBody is true, the ul dropdown menu is appended to the body of the page without any IDs or custom classes. This makes it impossible to apply custom styles if there are multiple selects.

I am aware of the generated ID vs1__listbox but it changes on every page depending on the number of selects

[mathiash98]

if you use the :calculatePosition prop you will be able to set classes and styles directly to the vue-select. That might solve your problem. https://vue-select.org/api/props.html#calculateposition

function withPopper(
  dropdownList: HTMLElement,
  component: { $refs: { toggle: Element | VirtualElement } },
  { width }: { width: number; top: number; left: number }
) {
  /**
   * We need to explicitly define the dropdown width since
   * it is usually inherited from the parent with CSS.
   */
  dropdownList.style.width = width.toString();
  dropdownList.style.zIndex = (500000).toString();
  dropdownList.classList.add("custom-class");
}

^^-> Something like this might work for you. I am not sure if you would need to use popper as well though in order to place the vue-select correctly

Edit: See https://github.com/sagalbot/vue-select/issues/1266#issuecomment-750016484 for related issue