Polymer：无法为 <core-submenu> 设置样式

Question

我使用 <paper-item> 在 <core-drawer-panel> 元素内创建了一个简单的菜单，其中包含以下内容：

<paper-item noink>
    <div class="core-menu-item">
        <core-icon icon="maps:beenhere"></core-icon>
        My Places 
    </div>
</paper-item>

如您所见，我用 <div> 包裹了内部以调整图标和文本样式 + 定位。实现这个效果：

所以我的问题是，如何以类似的方式设计 <core-submenu> 以获得相同的结果？

我试过遵循 documentation 但样式在光线下似乎非常有限 DOM；我似乎只能在整个项目周围添加填充，而不是特别是图标（我想为其添加更多填充）。

有什么建议吗？谢谢。

Answer 1

core-submenu 页面描述了部分解决方案。每个 core-submenu 在其阴影 DOM 中包含一个 core-item，用于显示子菜单的标题和图标。您可以使用以下样式设置样式：

core-submenu::shadow #submenuItem {
  color: red;
}

该项目本身在其影子根中包含一个 core-icon，ID 为 icon，因此您可以使用以下方式访问它：

core-submenu::shadow #submenuItem::shadow #icon {
  color: blue;
}

Polymer: Trouble styling the <core-submenu>