Angular2 styling issues caused by DOM attributes _ngcontent-* vs. _nghost-*
Well,
I found the answer myself. Using the default settings, you must not supply the wrapping my-comp
element selector in the components css.
Instead use the *
element selector to affect all elements nested in my-comp
. Otherwise, angular will treat the my-comp
selector as an additional element and thus add the _ng-content-*
attribute, which of course is not present in the DOM.
Another option is to disable ViewEncapsulation
for your component - be aware that it just affects the component my-comp
import {Component, ViewEncapsulation} from 'angular2/core'
@Component({
selector: 'my-comp',
encapsulation: ViewEncapsulation.None,
...
});
https://egghead.io/lessons/angular-2-controlling-how-styles-are-shared-with-view-encapsulation explains the three different settings modes perfectly.
update
It's ::ng-deep
since a while.
See also the comments below.
original
You didn't provide too much details where you add your styles and what elements you target with the selectors.
The "official" way if you want styles to cross element boundaries is to use >>>
like
:host >>> h1 {
background-color: red;
}
:host
targets the current element.>>>
(or/deep/
) makes Angular ignore_nghost-xxx
attributes which is used for component style encapsulation emulation.
See also Styles in component for D3.js do not show in angular 2