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.

Unable to style encapsulated components

See original GitHub issue

In the example below I use the list component and try to apply a background color on list items when the item is hovered. However _ngcontent attributes are added to my CSS selectors and some of the elements generated HTML seems to not receive this attribute making impossible to apply any style to it.

http://plnkr.co/edit/Sgr8DI9hWnOItPWR9Tva?p=preview

Original Style

I’ve tried different rules just in case…

  md-list-item:hover {
    background:red;
  }

  md-list-item:hover > div{
    background:green;
  }

  md-list-item > div:hover{
    background:blue;
  }

Injected Style

  md-list-item[_ngcontent-pgx-1]:hover {
    background:red;
  }

  md-list-item[_ngcontent-pgx-1]:hover > div[_ngcontent-pgx-1]{
    background:green;
  }

  md-list-item[_ngcontent-pgx-1] > div[_ngcontent-pgx-1]:hover{
    background:blue;
  }

Generated HTML

<md-list _ngcontent-pgx-1="" dense="" role="list">
    <md-list-item _ngcontent-pgx-1="" role="listitem" class="md-2-line">
        <div class="md-list-item">
            <div class="md-list-text">
                {{ ... }}
            </div>
        </div>
    </md-list-item>
</md-list>

I can’t find a way to match the generated div.md-list-item from the component style.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
jmcgoldrickcommented, Jul 27, 2016

You can get at them with either /deep/ or >>> (even though they are deprecated in CSS) angular supports them. see the page on styling on the angular.io site

1reaction
mackelitocommented, Sep 26, 2017

But you can still use ::ng-deep

Read more comments on GitHub >

github_iconTop Results From Across the Web

Encapsulating Style and Structure with Shadow DOM
Custom properties can pierce the shadow boundary and effect content inside a shadow node. “Can we use a <link> element inside of a...
Read more >
Using web components to encapsulate CSS and resolve ...
The solution: CSS encapsulation with web components​​ Custom elements brought it all together. The top-level template loads source/javascripts/ ...
Read more >
angular style not applied on components (despite the use of ...
I reckon it has something to do with the way angular displays the component since changing the tag to a DIV works. But...
Read more >
Angular Styling Encapsulation Not Working - MDBootstrap
Expected behavior I'm sure I'm missing something being a newby to MDB, but I am unable to style elements of MDB within child...
Read more >
CSS style not applying on dynamic injected html elements
I am using Angular 2.0.0-beta.12 & D3, i am injecting D3 barchart after viewInit, and inject css in component by adding attribute "styles", ......
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