Feature: Content projection and styling

[savaryt]

Bug, feature request, or proposal:

Feature
The use of /deep/ selector shouldn't be necessary most of the time.

What is the use-case or motivation for changing an existing behavior?

It would be great to see less implicit content projection for the material components in general, because it can be really painful to style some components, and we're forced to use /deep/ selector.

Example
Styling the first <md-tab-header> of a component that has multiple nested <md-tab-group> is only possible via /deep/ selector and > (child) selector.

Idea
Allow a more verbose declaration of components to ease styling.
For example the <md-tab-group> could be written this way:

<md-tab-group>
  <md-tab-header>
    <md-tab-label>First label</md-tab-label>
    <md-tab-label>Second label</md-tab-label>
    <md-tab-label>Last label</md-tab-label>
  </md-tab-header>

  <md-tab-body>
    <md-tab-content>First content</md-tab-content>
    <md-tab-content>Second content</md-tab-content>
    <md-tab-content>Last content</md-tab-content>
  </md-tab-body>
</md-tab-group>

That would allow to style

I took the <md-tab-group> as example, but the idea is the same for most components.
Issues for other components have already been filled (see #1718).

The <md-card> is in my opinion really great in it's content projection implementation because it allows to modify style pretty easily.

Well, if things can be done in order not to use /deep/ selector it would be great.

[andrewseguin]

On the same page, the necessity of /deep/ (or no view encapsulation, or global style sheet) is not ideal. This is great feedback that we'll consider as we develop our APIs. It is not always avoidable but it can certainly be a part of our consideration. I have run into this many times as I develop my own apps and it is one of the least intuitive parts of using Angular and Material, since it seems that styles just simply are not applied.

Will be closing this issue since we'll never really be able to consider this "fixed", but we will certainly keep it in mind as we work on the library and adjust how much we use content projection. Thanks for the feedback

[angular-automatic-lock-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.}