聚合：将样式应用于Shadow DOM下的元素

Posted 2021-04-12

我使用的是Polymer 2.0。我需要在Shadow DOM下为类应用样式。

如果情况如此（iron-dropdown在阴影根下）：

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

我们如何为类.dropdown-content应用样式

答案

<paper-menu-button>允许使用CSS属性（即分别为<iron-dropdown>和.dropdown-content）来设置内部--paper-menu-button-content和--paper-menu-button-dropdown：

<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

<paper-menu-button> docs on styling可能会列出您可能会发现有用的其他CSS属性。

另一答案

你可以使用内联样式来设计.dropdown-content。

不好但有效