question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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! 😃

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
devversioncommented, Jan 22, 2017

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.
0reactions
angular-automatic-lock-bot[bot]commented, Sep 8, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How do I change md-input-container placeholder color using ...
I am overriding the form-field outline, label-empty, label, underline, input element, placeholder text. I'm using Angular 8.2.2 and Angular ...
Read more >
The Shadow DOM Content Placeholder element - HTML
It has now been replaced by the <slot> element, which creates a point in the DOM at which a shadow DOM can be...
Read more >
Untitled
Users must use `md-input-container` and `label` going forward. ... fix empty attribute for selected not selecting options ...
Read more >
Real World Angular — Part 3: Form Formation - LinkedIn
Angular sets properties (such as value, status, ... /deep/ is a shadow dom scoping selector and not a part of standard scss.
Read more >
How to Label Shadow DOM - A11ycasts #20 - YouTube
Shadow DOM is a newer web platform feature that lets you scope your CSS and markup. This is great for preventing style leakage, ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found