聚合物：将样式应用于阴影下的元素 DOM

Question

我使用的是 Polymer 2.0。我需要在 Shadow DOM.

下为 class 应用样式

如果是这样（iron-dropdown在shadow-root下）：

<paper-menu-button>

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

</paper-menu-button>

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

您可以使用内联样式来设置样式 .dropdown-content。

不好但有效

Answer 2

<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 属性。

聚合物：将样式应用于阴影下的元素 DOM

Polymer: apply style to an element under Shadow DOM

html

css

polymer

polymer-2.x