Shadow piercing inside scss

Question

I am using css shadow piercing for one of my styles. But I have color codes inside scss that I want to use in style. Is it possible to have shadow piercing inside a scss file?

@Component({
selector: 'my-selector',
styles: [
    require('./my.style.scss'),
    ':host >>> .mystyle { background-color: green }'
],
templateUrl: './my.template.html'
})

Answer 1

AFAIK is >>>not supported in SASS because this combinator is not in the CSS standard. Angular has its own implementation to emulate its support.

AFAIR, using a space instead >>>, has the same effect in Angular2 with ViewEncapsulation.Emulated(default).

Using a space is no longer equivalent to >>>and /deep/.

Plunger example

/deep/ >>> Angular, /deep/ SASS.

SASS >>> ::ng-deep Angular (, ng- ).
Angular 4 ::ng-deep, >>>.

, ::ng-deep , . DOM , ViewEncapsulation.Emulated ( ) , Native , ::ng-deep .

Answer 2

>>> /deep/ , , >>> /deep/ .scss.

Answer 3

/deep/ DOM-- , ( Chrome 63).

Angular ( ) DOM ( DOM , /deep/ - css. , /deep/ DOM (encapsulation: ViewEncapsulation.Emulated) - .

, , ( ), Angular debrecated /deep/ ( - ).