聚合物：麻烦造型<core-submenu> </core-submenu>

Question

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

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

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

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

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