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.

More Related Contents:

  1. How to style child components from parent component’s CSS file?
  2. The use of /deep/ and >>> in Angular 2
  3. how do I make device specific selectors in css [closed]
  4. Is there a “previous sibling” selector?
  5. What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB?
  6. CSS selector for first element with class
  7. What does the “+” (plus sign) CSS selector mean?
  8. Is there a CSS selector by class prefix?
  9. How do I select an element based on the state of another element in the page with CSS?
  10. Does the order of classes listed on an item affect the CSS?
  11. Angular-cli from css to scss
  12. Select all child elements recursively in CSS
  13. CSS “and” and “or”
  14. Using the last-child selector
  15. Why doesn’t the selector h3:nth-child(1):contains(‘a’) work?
  16. What is the difference between :focus and :active?
  17. Can I have multiple :before pseudo-elements for the same element?
  18. Are parentheses allowed in CSS selectors?
  19. What is the difference between pipe (|) and caret (^) attribute selectors?
  20. Can type selectors be repeated to increase specificity?
  21. Zebra striping a table with hidden rows using CSS3?
  22. Select nth-child across multiple parents
  23. Combining :not() selectors in CSS
  24. Select an element with empty class attribute (class=””) using CSS?
  25. How do I target elements with an attribute that has any value in CSS?
  26. How to show the first N elements of a block and hide the others in css?
  27. What is the difference between :before and ::before?
  28. CSS class repetition to increase specificity
  29. select second child
  30. Dynamically updating css in Angular 2

Leave a Comment