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 在其 shadow DOM 中包含一个 core-item，用于显示子菜单的标题和图标。您可以使用以下方式设置样式：

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

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

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