Angular 2: How to style host element of the component?
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.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.
I have found a solution how to style just the component element. I have not found any documentation how it works, but you can put attributes values into the component directive, under the 'host' property like this:
@Component({
...
styles: [`
:host {
'style': 'display: table; height: 100%',
'class': 'myClass'
}`
})
export class MyComponent
{
constructor() {}
// Also you can use @HostBinding decorator
@HostBinding('style.background-color') public color: string = 'lime';
@HostBinding('class.highlighted') public highlighted: boolean = true;
}
UPDATE: As Günter Zöchbauer mentioned, there was a bug, and now you can style the host element even in css file, like this:
:host{ ... }
Check out this issue. I think the bug will be resolved when new template precompilation logic will be implemented. For now I think the best you can do is to wrap your template into <div class="root">
and style this div
:
@Component({ ... })
@View({
template: `
<div class="root">
<h2>Hello Angular2!</h2>
<p>here is your template</p>
</div>
`,
styles: [`
.root {
background: blue;
}
`],
...
})
class SomeComponent {}
See this plunker