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?

yurzui · Accepted Answer · 2017-07-26 05:47:23Z

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.

jaseelmp · Accepted Answer · 2017-07-23 05:39:16Z

0

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

})

answered Jul 23, 2017 at 5:39

jaseelmp

3672 silver badges5 bronze badges

1 Comment

Estus Flask Over a year ago

I need the opposite, to provide view encapsulation. These styles shouldn't leak outside the component.

Collectives™ on Stack Overflow

CSS encapsulation with Angular 4 and Materialize

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related