Cannot set shadow on dropdown menu

How do I set a shadow on the drop-down menu?

            <b-dropdown size="sm" variant="primary">
              <div class="shadow">...</div>
            </b-dropdown>

  .shadow{
    -webkit-box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.5);
    box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.5);
  }

I could do this with plain bootstrap :

<div class="dropdown-menu shadow">...</div>

Now the above code sets the shadow on the inner div but not the whole menu. When using F12 I see there is a parent ul which wraps my div with class dropdown-menu but setting any shadow css on that class has no effect!

[tmorehouse]

You can find out more about the limitations (and workarounds) for scoped styles and child components at https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements

[tmorehouse]

An alternative, if using an existing “shadow” class:

<b-dropdown menu-class="shadow">
</b-dropdown>

This will add the class (or classes) specified in prop menu-c;lass to the rendered .dropdown-menu <ul> element.