Components: _ngcontent attributes not appearing on generated html for md-list

[Stexxen]

Bug, feature request, or proposal:

Bug / clarification?

What is the expected behavior?

based on https://angular.io/docs/ts/latest/guide/component-styles.html#!#inspect-generated-css I would've expect all generated html to contain the _ngcontent attribute

What is the current behavior?

html tags generated within the component md-list-item (i.e. div with mat-list-item-content class) do not carry the _ngcontent attribute

What are the steps to reproduce?

See http://plnkr.co/edit/6PpJOw3E3AdpsLYc9v4T?p=preview for the example
in app.component.ts

@Component({
  selector: 'material-app',
  styles: [
    '.mat-list {padding:20px; background-color:lightblue;}',
    '.mat-list-item { padding: 10px; background-color: lightgreen; }',
    '.mat-list-item-content { padding: 10px; background-color: red; }',
  ],
  templateUrl: 'app.component.html'
})

Angular converts this to

<style>.mat-list[_ngcontent-c0] {padding:20px; background-color:lightblue;}</style>
<style>.mat-list-item[_ngcontent-c0] { padding: 10px; background-color: lightgreen; }</style>
<style>.mat-list-item-content[_ngcontent-c0] { padding: 10px; background-color: red; }</style>

The template contains

    <md-list dense>
      <md-list-item *ngFor="let item of items">
        {{item.name}}
      </md-list-item>
    </md-list>

but the html generated is this

<md-list _ngcontent-c0="" dense="" role="list" class="mat-list">
      <!--bindings={"ng-reflect-ng-for-of": "[object Object],[object Object"}-->
    <md-list-item _ngcontent-c0="" role="listitem" class="mat-list-item">
        <div class="mat-list-item-content mat-ripple" md-ripple="" ng-reflect-disabled="true">
            <div class="mat-list-text"></div> 
                    one
            </div>
    </md-list-item>
.
.
.

so the div is generated with class mat-list-item-content but no attribute, so the styles angular generates for mat-list-item-content are never applied as they are too specific.

As I wrote the above I began to wonder if this is as designed, and that any generated html not in the original template does not have _ngcontent attributes applied, in which case i'm trying to figure how you are meant to write css to effect mat-list-item-content?

[Stexxen]

I am able to target the mat-list-item-content using shadow piercing

.mat-list .mat-list-item /deep/.mat-list-item-content {
  height: 20px;
}

which generates

.mat-list[_ngcontent-c12]   .mat-list-item[_ngcontent-c12]     .mat-list-item-content {
  height: 20px; 
}

Is that the expected way of doing this, or is it still a bug/issue?

[jelbourn]

Almost all of our components have view encapsulation turned off so that people are able to customize the css. You should be able to style the components like any other DOM elements.

[jraadt]

@jelbourn Excuse me for being new at this, but when you include a material component like md-nav-list to a custom component I'm creating the encapsulation of my custom component adds the encapsulation attribute to all the material elements, except mat-list-item-content for some reason. This makes it difficult to style because whatever styles are added to the custom components styles block are encapsulated with the custom component's attributes. I hope this makes sense.

So if I add
.mat-nav-list .mat-list-item .mat-list-item-content { flex-direction: column }

to my-nav.component.scss it wont apply those styles.

[rkajbaf]

Tabs and button toggles appear to be encapsulated (so styling is very difficult). Is there a way to turn it off? Shadow DOM piercing is deprecated and I don't want to rely on it too much. A lot of the benefits on Angular and components start unraveling the more you use it.

[willshowell]

@rkajbaf Button toggles are not but you're right about ~md-tab~ and md-tab-group. Would you mind opening a separate issue about those?

EDIT: I see md-tab has no styles

[willshowell]

@rkajbaf but also, the components having encapsulation turned on shouldn't require you use /deep/. You should remove encapsulation from your own components if you want your styles to pierce child components.

[flackjap]

Ummmm, I just stumbled upon this.

Firstly, I've been solving this by moving style rules over to my main style file, which is out of any component level, hence - no encapsulation, and I managed to style many of the material elements which I previously could not, and had no idea why. As it happened to me 3 or 4 times already, I had to look it up. I think it was a bit hard to google it up, as I had no clue what was going on, except that my styles were not working and I had to temporarily fix it with global styles.

Now that I see that Material isn't generating all elements with encapsulation tags, and that is it the case with multiple components (not just the mentioned md-list ... right now I'm having a problem with mat-input-fix for md-form-field, and believe there are more cases like this), I believe there should be a standard utility for this ... not something that is deprecated, such as the /deep/ shadow-piercing descendant combinator.

Is there any other suggestion on how we should be handling this? Should I contribute to Material and make it add encapsulation for every generated element too? Should we continue using the /deep/ selector drop the needle combinator until it all breaks some day when it's fully dropped? Any suggests?

[willshowell]

@flackjap Material should be using ViewEncapsulation.None everywhere (and there is now a lint rule to keep it that way). This means that [_ngcontent-***] will not get inserted into any of their component stylesheets, and their style specificity will remain low.

Other than CSS specificity, it should not matter to you, the consumer, anyway. The reason you are not able to style .mat-input-infix is because that element "belongs" to MatFormField, not your component. And your component is ViewEncapsulation.Emulated by default. So it is _your_ styles that are not allowed to leak into MatFormField's elements.

As you've noticed, you can add them to your global styles to get it to work. Other solutions are using ViewEncapsulation.None in your component (beware your component styles will now be globally available) or using the ::ng-deep selector.

You might want to take a look at this guide and this blogpost.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}