Angular 4 router-outlet css

Question

With the deprecation of all three of /deep/ , >>> , and ::ng-deep how do I style the router-outlet siblings?

I used to :host /deep/ router-outlet + * {height: 100%} before they announced their intention to drop support for the above selectors.

Answer 1

update

::slotted is now supported by all new browsers and can be used with `ViewEncapsulation.ShadowDom

https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

original

:host ::ng-deep router-outlet + * {height: 100%}

or just

::ng-deep router-outlet + * {height: 100%}

should still work

::ng-deep is deprecated but with a different meaning than /deep/ and >>> . /deep/ and >>> were deprecated because browsers and especially SASS stopped supporting them. They agreed on supporting ::ng-deep instead.

::ng-deep is deprecated because eventually all browsers will support native shadow DOM and probably some way of styling them, and then ::ng-deep will become obsolete.