如何在 `paper-dropdown-menu` 中设置 `paper-listbox` 的 `border-radius`？

Question

我正在尝试圆化 paper-listbox 的角，它包含在 paper-dropdown-menu 中。但是，以下 CSS 并没有像我预期的那样改变边界半径：

paper-listbox {
  border-radius: 14pt !important;
  --paper-listbox: {
    border-radius: 14pt;
    overflow: hidden;
  };
}

如何设置这个 paper-listbox 的 border-radius？

截图：

Answer 1

<paper-dropdown-menu> 的内部 DOM 看起来像这样：

  <paper-menu-button>
    <iron-dropdown>
      <div slot="dropdown-content" class="dropdown-content">
        <slot name="dropdown-content"></slot> <!-- user's slot content of paper-dropdown-menu is inserted here -->
      </div>
    </iron-dropdown>
  </paper-menu-button>

所以这个用户代码：

<paper-dropdown-menu>
  <paper-listbox slot="dropdown-content"> <!-- user's slot content -->
  </paper-listbox>
</paper-dropdown-menu>

变成：

<paper-dropdown-menu>
  <paper-menu-button>
    <iron-dropdown>
      <div slot="dropdown-content" class="dropdown-content">
        <paper-listbox>  <!-- user's slot content inserted -->
        </paper-listbox>
      </div>
    </iron-dropdown>
  </paper-menu-button>
</paper-dropdown-menu>

在<paper-menu-button>, the div.dropdown-content container is styled to show a box-shadow (via --shadow-elevation-2dp), making the square edges of the <div> appear. The CSS you used to style the <paper-listbox> indeed styles the listbox, but the square edges you saw were actually from the listbox's parent (div.dropdown-content) with its box-shadow edges. You can override the styles of div.dropdown-content with the --paper-menu-button-contentmixin中，如下步骤所示：

将 class 应用到您的 <paper-dropdown-menu>:
```
<paper-dropdown-menu class="dropdown">
```

为设置 --paper-menu-button-content:

的 class 创建样式

<style>
  .dropdown {
    --paper-menu-button-content: {
      border-radius: 14pt;
    }
  }
</style>

window.addEventListener('WebComponentsReady', () => {
  class XFoo extends Polymer.Element {
    static get is() { return 'x-foo'; }

    static get properties() {
      return {
        customers: {
          type: Array,
          value: () => [
            'Alice',
            'Bob',
            'Charlie',
            'David',
          ]
        }
      };
    }
  }
  customElements.define(XFoo.is, XFoo);
});

<head>
  <base href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/">
  <script src="webcomponentsjs/webcomponents-loader.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-listbox/paper-listbox.html">
  <link rel="import" href="paper-item/paper-item.html">
  <link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
  <link rel="import" href="neon-animation/web-animations.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <style>
        .dropdown {
          --paper-menu-button-content: {
            border-radius: 14pt;
          }
        }
      </style>

      <paper-dropdown-menu id="customer"
                           class="dropdown"
                           placeholder="Select Customer">
        <paper-listbox id="customerList"
          slot="dropdown-content"
          attr-for-selected="value"
          selected="[[customer]]">
          <template is="dom-repeat" items="[[customers]]" as="customer">
            <paper-item value="[[customer]]">[[customer]]</paper-item>
          </template>
        </paper-listbox>
      </paper-dropdown-menu>
    </template>
  </dom-module>
</body>

Answer 2

<paper-listbox> 为您找到了自定义属性样式元素：

Custom property                     | Description                   | Default 
------------------------------------|-------------------------------|-----------------------
`--paper-listbox-background-color`  | Menu background color         | `--primary-background-color`
`--paper-listbox-color`             | Menu foreground color         | `--primary-text-color`
`--paper-listbox`                   | Mixin applied to the listbox  | `{}`

--paper-listbox 可能对您的情况有用：

<dom-module id="x-app">
  <template>
    <style>
      :host {
          --paper-listbox: {
              border-radius: 14pt;
              border: solid 1px blue;
              /* you need to hide overflow */
              overflow: hidden;
          }
      }

      /* OR (if you have multiple listbox with different styles) */
      
      paper-listbox.radius {
          --paper-listbox: {
              border-radius: 14pt;
              border: solid 1px blue;
              overflow: hidden;
          }
      }
    </style>

    <paper-listbox class="radius">
      <paper-item>a</paper-item>
      <paper-item>b</paper-item>
      <paper-item>c</paper-item>
    </paper-listbox>
  </template>
</dom-module>

如何在 `paper-dropdown-menu` 中设置 `paper-listbox` 的 `border-radius`？

How to set `border-radius` of `paper-listbox` inside `paper-dropdown-menu`?

css

polymer

polymer-2.x