Question

我有一个核心菜单，下面有一些核心子菜单（每个都是一个手风琴子菜单）。每个子菜单都有一个图标和一个标签，在子菜单的属性标记中定义。有没有办法可以为图标和标签设置不同的颜色？有没有更好的方法来实现我想要做的事情？

你可以看到我在下面尝试过的内容。

<style>
    core-submenu {
        color: red;
    }
    core-submenu::shadow [icon="maps:local-hospital"] { 
        color: blue; 
    }
    core-submenu::shadow [icon="editor:attach-money"] { 
        color: green; 
    }
</style>

<core-menu>
    <core-submenu icon="maps:local-hospital" label="Benefits">
            <core-item label="Hospitals"></core-item>
            <core-item label="Clinics"></core-item>
    </core-submenu>
     <core-submenu icon="editor:attach-money" label="Money">
            <core-item label="Banks"></core-item>
            <core-item label="ATMs"></core-item>
    </core-submenu>
</core-menu>

请注意，我查看了关于核心子菜单样式的this帖子以及关于Firefox中核心子菜单样式的this帖子，但发现这对此情况没有帮助。

Answer 1

如您链接到的first帖子所述：

每个核心子菜单在其阴影DOM中包含一个core-item，用于显示子菜单的标题和图标。

项目本身在其阴影根中包含core-icon，ID为

您的选择器目前定位icon影子树中具有core-submenu属性的元素。这是不对的，因为

icon属性位于core-submenu元素本身，
您尝试定位core-icon元素，而不是具有icon属性的元素。

您需要将属性选择器与core-submenu类型选择器及其::shadow伪元素相结合，并将子图标设置在子菜单 item 中阴影树，附加::shadow伪元素，如下所示：

core-submenu {
    color: red;
}
core-submenu[icon="maps:local-hospital"]::shadow core-item::shadow #icon {
    color: blue; 
}
core-submenu[icon="editor:attach-money"]::shadow core-item::shadow #icon {
    color: green;
}

聚合物：样式化特定的核心子菜单图标

1 个答案: