聚合物：將樣式應用於Shadow DOM下的元素

Question

我使用的是Polymer 2.0。 我需要為Shadow DOM下的類應用樣式。

如果情況是這樣 （ iron-dropdown在shadow-root下）：

<paper-menu-button>

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

</paper-menu-button>

iron-dropdown樣式我們可以這樣寫：

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

但是，在這種情況下：

<paper-menu-button>

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

</paper-menu-button>

我們如何為class .dropdown-content 應用樣式

Answer 1

<paper-menu-button>允許使用CSS屬性（即分別為--paper-menu-button-content和--paper-menu-button-dropdown ）對內部<iron-dropdown>和.dropdown-content進行樣式設置：

<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>
    ...

演示

有關樣式的<paper-menu-button>文檔可能會列出您可能會覺得有用的其他CSS屬性。

Answer 2

您可以使用內聯樣式來設置.dropdown-content樣式。

不好但是有效