Polymer: Anwenden von Stil auf ein Element unter Shadow DOM

Question

Ich habe mit Polymer 2.0. Ich muss Stil für eine Klasse unter Shadow DOM anwenden.

Wenn der Fall ist, wie (iron-dropdown ist unter Schatten-root):

<paper-menu-button> 

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

</paper-menu-button> 

Stil für iron-dropdown wir so schreiben:

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

Aber in diesem Fall:

<paper-menu-button> 

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

</paper-menu-button> 

Wie können wir anwenden Stil für Klasse.dropdown-content

Answer 1

<paper-menu-button> ermöglicht die innere <iron-dropdown> und .dropdown-content mit CSS-Eigenschaften Styling (dh --paper-menu-button-content und --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

Die <paper-menu-button> docs on styling können andere Liste CSS-Eigenschaften, die Sie möglicherweise nützlich finden.

Answer 2

Sie Inline-Stile Stil .dropdown-content nutzen könnten.

nicht schön, aber effektiv