Search code examples
javascriptangularrouter-outlet

Angular 4 router-outlet css

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.

Solution

  • 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.