CSS encapsulation with Angular 4 and Materialize

Question

Here's an example that introduces both regular Materialize select and Angular Materialize component:

@Component({
  selector: 'my-app',
  styles: [`
.select-wrapper {
  background-color: red;
}
  `],
  template: `
    <div class="row">
       <div class="col s6">
        <select materialize="material_select">
            <option>...</option>
        </select>
       </div>

       <div class="col s6">
        <select class="non-angular-materialize">
            <option>...</option>
        </select>
       </div>
    </div>
  `,
})
export class App {
  ngOnInit() {
     $('.non-angular-materialize').material_select();
  }
}

Styles are not applied.

Although same example works with /deep/, this defies the purpose of components:

:host /deep/ .select-wrapper {
  background-color: red;
}

Why does this happen? Is it possible to keep CSS encapsulation and avoid /deep/ when styling the elements of component template? Is this problem specific to Materialize?

Answer 1

ViewEncapsulation.Emulated is used by default.

To emulated css encapsulation angular addes some attributes to all elements within template.

For example, the following template

<div class="col s6">
  <select materialize="material_select">
    <option>...</option>
  </select>
</div>

becames

<div _ngcontent-c0="" class="col s6">
  <select _ngcontent-c0="" materialize="material_select">
    <option _ngcontent-c0="">...</option>
  </select>
</div>

where c0 is unique id of your component.

And besides overwriting template angular also create specific css selectors from styles|styleUrls content.

So

.select-wrapper {
  background-color: red;
}

becames

.select-wrapper[_ngcontent-c0] {
  background-color: red;
}

Eventually the CSS is not applied because your dynamically added HTML(after running plugin) doesn't have the attributes _ngcontent-c0 applied

Using the "shadow piercing" CSS combinators or having styles outside of styles|styleUrls properties should work around it.

Answer 2

the use of /deep/, >>> and ::ng-deep are with emulated view encapsulation. Emulated is the default and most commonly used view encapsulation.Angular support 3 types of view encapsulation 1.Native: view encapsulation uses browsers native shadow DOM. 2.Emulated(default): emulate the behaviour of shadow DOM by renaming css classes and effectively scope the CSS to the component's view. 3.None: Angular does no view encapsulation. Angular adds the CSS to the global styles.similar to pasting components styles in html you can set the view encapsulation by adding encapsultion with your component. eg:-

@Component({
  selector: 'hero-team',
  template: ``,
  encapsulation: ViewEncapsulation.None

})