Angular 2: How to style host element of the component?

by

There was a bug, but it was fixed in the meantime. :host { } works fine now.

Also supported are

  • :host(selector) { ... } for selector to match attributes, classes, … on the host element

  • :host-context(selector) { ... } for selector to match elements, classes, …on parent components

  • selector /deep/ selector (alias selector >>> selector doesn’t work with SASS) for styles to match across element boundaries

    • UPDATE: SASS is deprecating /deep/.
      Angular (TS and Dart) added ::ng-deep as a replacement that’s also compatible with SASS.

    • UPDATE2: ::slotted
      ::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

See also Load external css style into Angular 2 Component

/deep/ and >>> are not affected by the same selector combinators that in Chrome which are deprecated.
Angular emulates (rewrites) them, and therefore doesn’t depend on browsers supporting them.

This is also why /deep/ and >>> don’t work with ViewEncapsulation.Native which enables native shadow DOM and depends on browser support.

Leave a Comment

tech