md-input-container: shadow dom attribute is not set for placeholder <label>

Bug, feature request, or proposal:

Bug

What is the expected behavior?

>> Note: I want to change the style of <input md-input>'s auto generated <label> only within the current component’s template. It is working for every auto generated dom part of md-input, but not for its <label>/placeholder

I was trying to change the color of <input md-input>'s <label> with the following CSS:

// example code. see plnkr.
label.md-input-placeholder.md-focused {
    color: red;
}
.md-input-placeholder {
    color: white;
}

the problem is, that attribute selectors for shadow dom attributes (if I’m right with their name) like [_ngcontent-qny-41] will be appended to the styles but not to the <label> dom element, so the styling takes no effect.

It works if this would be the output: <label _ngcontent-qny-41="" class="md-input-placeholder md-empty md-float" for="md-input-0">Username</label>

What is the current behavior?

Shadow dom attribute is missing in <input md-input>'s generated <label> element (set via placeholder attribute).

Current generated output:

<md-input-container _ngcontent-qny-41="">
    <~~~>
        <input _ngcontent-qny-41="" class="md-input-element" md-input="" placeholder="Username" value="" ng-reflect-placeholder="Username" ng-reflect-id="md-input-0" id="md-input-0">
        <label class="md-input-placeholder md-empty md-float" for="md-input-0">Username</label>
    </~~~>
</md-input-container>

What are the steps to reproduce?

Plunker: http://plnkr.co/edit/7hut1LJlZtByTTuDFwSO?p=preview

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

Customization

Which versions of Angular, Material, OS, browsers are affected?

Using Angular Material (SHA 592f33f) from 1/20/2017, 10:40 PM

Is there anything else we should know?

If there is a possibility to have a globally applied theme and defining another theme for a specific component which is used within that global them scope, then this way of styiling md controls wouldn’t be necessary at all… (but I haven’t found smth like that).

If someone has a workaround etc. let me know. Thank you in advance! 😃

[devversion]

Only the <input> element will get the _ngcontent-qny-41 attribute, because that element has been projected into the MdInputContainer component.

See the MdInputContainer template: here

The remaining elements in the MdInputContainer template will not receive any of the _ngcontent-qny-X attributes, because for all Material components the ViewEncapsulation is set to None.

This is per design, because it makes it easier for developers to overwrite specific styles of the Material components.

There are three options to overwrite the styles of the MdInputContainer.

• Disable ViewEncapsulation on your component.
• Use the /deep/ selector to target the child MdInputContainer component
• Place the CSS outside of Angular to target the MdInputContainer everywhere.

[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.}