在带有三角形顶部的 Polymer 中创建配置文件下拉菜单

Question

我正在尝试为我的聚合物网站创建一个配置文件菜单，类似于 github.com

如果您注意到，menu.I 的顶部有一个三角形尖端，我正在尝试在 paper-listbox 的顶部创建一个类似的三角形。

我面临的问题是三角形似乎一超出paper-listbox的边界就隐藏起来了。

我已经创建了一个 jsbin 来演示我的问题：http://jsbin.com/samaloqowu/1/edit?html,console,output

如果你改变三角形的top 属性（比如-16px），当它离开列表框区域时它会隐藏。请帮我解决这个 CSS 问题。

Answer 1

简答：不，你不能。

说明：因为下拉内容被封装在一个开槽元素中，该元素在自定义元素的 shadowRoot 内设置样式，您尝试修改行为。 paper-menu-button 实际上并没有为您提供直接自定义开槽的方法。
但是有一个窍门！您可以通过经典 javascript 访问插槽。只需更改 connectedCallback 函数并添加此行：

...
connectedCallback() {
  super.connectedCallback();

  this.$.profileMenu.$.dropdown.querySelector('.dropdown-content').style.overflow = 'visible';
  ...
}
...

这应该可以解决问题，我同意这看起来非常糟糕，并且不真正推荐尝试强制和更改元素的初始行为，但它似乎有效，只需在元素进入时进行一些测试新上下文以查看是否有任何问题。

更新（22/09/2017）：

再次想到这一点，我认为将此溢出更改为 visible 是一个糟糕的主意，我猜聚合物团队已将 overflow 设置为 auto，因为如果列表变长并且您强制元素的高度，列表将流动并可见，这不再是真正的下拉列表，而更像是完整的列表显示，这会扰乱您应用程序的一般设计目的。 IMO 当您开始尝试弄乱自定义元素的内部属性时，这意味着该元素不会满足您的要求，并且是时候制作您自己的元素了，尤其是当您尝试修改具有设计已经实施。

在带有三角形顶部的 Polymer 中创建配置文件下拉菜单

Create Profile Dropdown Menu in Polymer with Triangular top

css

listbox

polymer

polymer-2.x