Angular2 - Adding [_Ngcontent-Mav-X] to Styles

Angular2 - adding [_ngcontent-mav-x] to styles

update2

::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

update

/deep/ and >>> are deprecated.
::ng-deep replaces them. ::-deep is also marked deprecated in source and the docs, but this means that it will also be removed eventually.

I think it depends on what W3C comes up with for theming the shadow DOM (like https://tabatkins.github.io/specs/css-shadow-parts/)

It's basically a workaround until all browsers support that natively and ViewEncapsulation.Emulated can be removed entirely.

::ng-deep is also supported in SASS (or will be, depending on the SASS implementation)

original

View encapsulation helps to prevent styles bleeding into or out of components. The default encapsulation is ViewEncapsulation.Emulated where classes like _ngcontent-mav-x are added to component tags and also styles are rewritten to only apply to matching classes.

This emulates to some degree the default behavior of the shadow DOM.

You can disable this encapsulation adding encapsulation: ViewEncapsulation.None to the @Component() decorator.

Another way is the recently (re-)introduced shadow piercing CSS combinators >>>, /deep/, and ::shadow. These combinators were introduced for styling shadow DOM but are deprecated there. Angular introduce them recently until other mechanisms like CSS variables are implemented.
See also https://github.com/angular/angular/pull/7563 (https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta10-2016-03-17)

>>> and /deep/ are equivalent and using this combinators makes the styles ignore the the added helper classes (_ngcontent-mav-x)

* >>> my-component, /* same as */
* /deep/ my-component {
  background-color: blue;
}

applies to all my-component tags not matter how deep they are nested in other components.

some-component::shadow * {
  background-color: green;
}

applies to all elements in the template of some-component, but not further descendants.

They can also be combined

* /deep/ my-component::shadow div {
  background-color: blue;
}

this applies to all div elements in the template of all my-component templates no matter how deep my-component is nested in other components.

/deep/, >>>, and ::shadow can only be used with

encapsulation: ViewEncapsulation.None
encapsulation: ViewEncapsulation.Emulated
encapsulation: ViewEncapsulation.Native when the browser supports them natively (Chrome does but prints a warning in the console that they are deprecated) or

when the browser doesn't native support shadow DOM and the
web_components polyfills are loaded.

For a simple example see also the Plunker from this question https://stackoverflow.com/a/36226061/217408

See also this presentation from ng-conf 2016 https://www.youtube.com/watch?v=J5Bvy4KhIs0

How do I append DOM to an Angular 2 component and still get encapsulated styles

If you use a style like

:host .output {
  ... 
}

it should be applied.

If this doesn't work use

:host /deep/ .output {
  ... 
}

Angular2 Styles are not applied without ViewEncapsulation.None

You can try to use the native directive ngClass instead of the styleClass from p-column.

  <p-dataTable [value]="values">
    <p-column *ngFor="let column of columns;"
              [header]="column.name"
              [field]="column.field"
              [ngClass]="{{getColumnCssClasses(column)}}"
             >
    ...
    </p-column>
  </p-dataTable>

If that doesn't work you can add this to the container

:host  /deep/   .toggle-column { width: 55px; }

You can find some more options by reading this blogpost Angular — Advanced Styling Guide (v4+).

*ngContainerOutlet style not working with ng-component encapsulation

update

::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

original

You can use the /deep/ combinator to overcome encapsulation:

:host /deep/ ng-component {
  ...
}

How do I change the CSS of pills ? (angular2)

Update:

Thanks for the website link was able to recreate what you wanted. Add this CSS and it'll work.

Old:

Please find a sample of how to apply the CSS, I tried my best to replicate the image, you can find the styles in style.css inside the Plunkr

Plunkr Demo

CSS:

ul.nav-pills .nav-item {
    display: inline;
}

ul.nav-pills .nav-item > a {
    padding: 4px 35px;
    margin: 4px 5px;
    color: black;
    text-decoration: none;
}

ul.nav-pills .nav-item > a.active {
    background-color: maroon !important;
    color: white;
}

Styles in component for D3.js do not show in angular 2

Update

Angular and SASS agreed on supporting ::ng-deep (instead of >>> or /deep/) a while ago until ::slotted or whatever makes it into browser standards becomes available in all browsers.

ViewEncapsulation.Emulated (default)

That's by design. Angular adds class names unique to components and rewrites the added styles to only apply to the components where they were added.

D3 generates HTML dynamically without Angulars knowledge and Angular can't apply the classes to make the styles apply on the generated HTML.

If you add the styles at the entry point HTML file, Angular also doesn't rewrite the styles and the added helper classes don't take effect.

ViewEncapsulation.None

With encapsulation: ViewEncapsulation.None Angular doesn't do this rewriting, therefore the result is similar to adding the HTML to the index.html.

"Shadow-piercing"

Alternatively you can use the recently introduced shadow piercing CSS combinators >>>, /deep/ and ::shadow (::shadow is just replaced by a and thus very limited). See also https://stackoverflow.com/a/36225709/217408 and the Plunker

:host /deep/ div {
  color: red;
}

SASS

/deep/ works fine with SASS but the alias >>> doesn't.

The shadow-piersing CSS combinators are rewritten by Angular and they don't need to be supported by the browsers. Chrome supported them for a while but they are deprecated - but as said, that doesn't matter, because Angular rewrites them to use its encapsulation emulation.

ViewEncapsulation.Native

Angular doesn't support any way to style such components from the outside. Only if the browser provides support like CSS variables then these can be used.

Angular2 does not inject template CSS when refreshing the page

I cloned your repo, your styles are loading fine. The issue you are having is not related to CSS injection. It's related to "if you don't mind me saying" bad design and not using ViewEncapsulation.

Before I explain the issue, I have to say that in your current way of using CSS, you will be better of using one global CSS file.

Explanation

When you don't use view encapsulation, every CSS you import will stick in the page until you refresh it. It will never be removed. And it will be applied to any element on the page that it applies to. And because it's inserted only when you visit the corresponding component/route, when you refresh the page, some CSS doesn't get injected into the page because you haven't visited the component it was on.

I will take the class appContainer as an example to help explaining the problem.

In styles/landingOther.css you have:

.appContainer {
    width: 60%;
}

Because your default route is /landing, when you visit the page http://localhost:3000/, the .appContainer class will be injected to the page and will stay on the page until you refresh. So, when you route to /portfolio, appContainer is still injected in the page and it will get applied. But, when you directly go to http://localhost:3000/portfolio, the landing component is never visited, therefore the .appContainer class was never injected in the page so it will not get applied. And same goes for other classes. I hope you get the logic.

Also, a semi-related note, the css file name in your portfolio.component.ts is wrong. It's in capital case while the actual file is small cased.

Angular2 - Adding [_Ngcontent-Mav-X] to Styles