使用三角形顶部在Polymer中创建轮廓下拉菜单

Question

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

http://jnicookbook.owsiak.org/recipe-No-018/

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

我面临的问题是，一旦三角形离开paper-listbox的边界，它就会隐藏起来。

我创建了一个jsbin来演示我的问题：

如果更改三角形的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当你开始尝试搞乱自定义元素的内部属性时，这意味着这个元素不能解决你的需求，并且是时候自己做了，特别是当你试图修改自定义元素的设计时设计已经实施。