Полимерная перекрестная укладка не работает

Question

Я пытаюсь повлиять на CSS теневого DOM элемента, используя стили, примененные к хосту. Кажется, это должно работать, но это не так.

/* my-element styles */

:host .conditional { display: none; }
:host(.show-conditional) .conditional { display: list-item; }

<!-- my-element template -->
<ul>
    <li>Always visible</li>
    <li class="conditional">Only when host has .conditional set</li>
</ul>

Надеюсь, понятно, что я здесь пытаюсь сделать. Когда я проверяю my-elementЯ вижу, что это имеет my-element-0, show-conditional классы установлены. Осмотр второй li показывает, что применяется только стиль, скрывающий его, но стиль, который должен показывать это, не применяется. Детализация в сгенерированной таблице стилей показывает, что есть стиль, который должен сделать li видно, но это не так:

.my-element-0 .conditional.my-element { display: none; }.my-element-0.show-conditional .conditional.my-element { display: list-item; }

Второй стиль не относится к моему li когда я проверяю это, но, глядя на классы родителя, это выглядит так, как должно.

Что мне не хватает?