I have component in Angular 2 called my-comp:
<my-comp></my-comp>
How does one style the host element of this component in Angular 2?
In Polymer, You would use ":host" selector. I tried it in Angular 2. But it doesn't work.
:host {
display: block;
width: 100%;
height: 100%;
}
I also tried using the component as selector:
my-comp {
display: block;
width: 100%;
height: 100%;
}
Both approaches don't seem to work.
Thanks.
Best Answer
There was a bug, but it was fixed in the meantime.
:host { }
works fine now.Also supported are
:host(selector) { ... }
forselector
to match attributes, classes, ... on the host element:host-context(selector) { ... }
forselector
to match elements, classes, ...on parent componentsselector /deep/ selector
(aliasselector >>> selector
doesn't work with SASS) for styles to match across element boundariesUPDATE: 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.ShadowDomhttps://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 withViewEncapsulation.Native
which enables native shadow DOM and depends on browser support.