Polymer: apply style to an element under Shadow DOM

Question

I have using Polymer 2.0. I need to apply style for a class under Shadow DOM.

If the case is like (iron-dropdown is under shadow-root):

<paper-menu-button>

#shadow-root
<iron-dropdown></iron-dropdown>

</paper-menu-button>

Style for iron-dropdown we can write like this:

paper-menu-button {
   --iron-dropdown: {   
     overflow:visible;
   }
} 

But, In this case:

<paper-menu-button>

#shadow-root
<iron-dropdown>
<div class="dropdown-content"> content </div>
</iron-dropdown>

</paper-menu-button>

How can we apply style for class .dropdown-content

Answer 1

<paper-menu-button> allows styling the inner <iron-dropdown> and .dropdown-content with CSS properties (i.e., --paper-menu-button-content and --paper-menu-button-dropdown, respectively):

<dom-module id="x-foo">
  <template>
    <style>
      paper-menu-button {
        /* applies to inner iron-dropdown */
        --paper-menu-button-dropdown: {
          overflow: visible;
        };

        /* applies to inner .dropdown-content */
        --paper-menu-button-content: {
          box-shadow: 5px 10px 20px lightblue;
          overflow: visible;
        };
      }
    </style>

    <paper-menu-button>
    ...

demo

The <paper-menu-button> docs on styling may list other CSS properties you might find useful.