dropdown-menu style when append-to-body

[rockisch]

Is your feature request related to a problem? Please describe. Whenever a dropdown has append-to-body set to true, there's no way to add 'local' styles to the dropdown menu using CSS, since you can't filter the parent class, and just using .dropdown-menu would result in changes in all dropdown instances.

Describe the solution you'd like Easier solution would be to add a menu-class/dropdown-menu-class prop to the dropdown component.

Describe alternatives you've considered If the dropdown slot allowed other elements besides templates, the issue would also be solved, but I think that would result in a lot of CSS being rewritten to allow that.

Also, I know I can always just do the styling by JS, but I think CSS is always preferred.

Additional context Quick example:

<dropdown :append-to-body="true" class="dropdown-test">
  <btn type="primary" class="dropdown-toggle">Dropdown</btn>
  <template slot="dropdown">
    <li>Option</li>
  </template>
</dropdown>

<style>
.dropdown-test > .dropdown-menu {  // this would normally work, but since it's appended to the body, it won't
  color: red;
}
.dropdown-menu {                   // this will work, but it will also override other dropdown-menu styles.
  color: red;
}
</style>

[wxsms]

body > .dropdown-menu {
 // ...
}

this will work as expected I guess? but dropdown-menu-class still sounds reasonable.

[rockisch]

I use other dropdown components with append-to-body, so doing that would also end up overriding the styles of other dropdowns. If you're ok with the dropdown-menu-class idea I can try implementing it on the weekend.

[wxsms]

It's totally fine. Note that if you're targeting Vue.js 2, please make PR to 1.x branch, otherwise dev branch.