Стилизация затененных элементов из внешнего мира с помощью Stylus/WebStorm

Question

В Angular 2 я пытаюсь стилизовать экземпляр компонента из таблицы стилей его контейнера

<my-container>
  <my-component>
    <span>some text</span>
  </my-component>
</my-container>

Очевидно, у меня есть ViewEncapsulation.None установить в my-component.ts,

my-container.styl:

:host /deep/ span {
  color: red;
}

В основном я озадачен тем, что с отключенной ViewEncapsulation, селектор все еще нуждается /deep/ для пролета, чтобы приобрести красный цвет стайлинга. Кроме этого, я не совсем уверен, какой тип селектора мне следует использовать, учитывая, что /deep/ а также ::shadow Говорят, что устарели. Единственное, что осталось на поле битвы, кажется, тройной > комбинатор >>>,

Это, в свою очередь, кажется, не поддерживается и не понимается ни стилусом, ни WebStorm. Эффект состоит в том, что переформатирование кода полностью искажает код стиля.

Есть ли другой способ кодировать селектор css/styl для моих элементов span, кроме того, который я использую?

РЕДАКТИРОВАТЬ

Пытаясь разобраться в планах на будущее, я изучил проект спецификации - как раз перед разделом 3.2.6 говорится:

Для таблицы стилей во внешнем документе селектор x-foo >>> span выбирает все три элемента: #top, #not-top и #nested.

Но тогда говорится:

Пронзающий теневой комбинатор является частью статического профиля селекторов, а не динамического профиля. Это означает, что он может использоваться, например, в методе querySelector(), но недопустим при использовании в таблицах стилей.

Я не понимаю