Styling shadowed elements from outer world using Stylus/WebStorm

Question

In Angular 2 I am trying to style an instance of a component from the stylesheet of its container

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

Obviously, I have ViewEncapsulation.None set in my-component.ts.

my-container.styl:

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

Basically I am puzzled that with ViewEncapsulation disabled, the selector still needs /deep/ for the span to acquire the red color styling. Other than that, I am kind of unsure what type of selector should I use, given that /deep/ and ::shadow are said to be deprecated. The only thing that's left on the battlefield seems to be the triple > combinator >>>.

This in turn doesn't seem to be supported/understood either by stylus or WebStorm. The effect is that reformatting code completely mangles the styling code.

Is there any other way to code the css/styl selector for my span elements than the one I am using?

EDIT

When trying to look into what are plans for the future, I looked into the draft spec - just before section 3.2.6 it says:

For a stylesheet in the outer document, the selector x-foo >>> span selects all three of elements: #top, #not-top, and #nested.

But then it states:

The shadow-piercing descendant combinator is part of the static profile of Selectors, not the dynamic profile. This means that it is usable in, for example, the querySelector() method, but is invalid when used in stylesheets.

I don't get it.