Полимер: стилизация специальных значков подменю основного ядра

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 посте на ядро-подменит стайлинг и this поста на ядро-подменят стилизации в Firefox, но нашел ни полезными для этой ситуации.

Answer 1

Как уже упоминалось в first пост, что вы ссылаетесь на:

Каждое ядро-подменю включает в его тени DOM, который используется для отображения названия и иконки для подменю в core-item.

Сам элемент содержит в его тени корня в core-icon, с идентификатором значка

Ваш селектор в настоящее время предназначается элемент с атрибутом icon в теневом дереве core-submenu «ы. Это не правильно, так как

• атрибут icon на самом core-submenu элемент, и
• вы пытаетесь целевой core-icon элемент, а не элемент с атрибутом icon.

Вы должны объединить селектор атрибута с селектором core-submenu типа и его ::shadow псевдо-элемента, и целевой значок в рамках пункта подменю «s тени дерева с дополнительным ::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; 
}