Stack Overflow
Stack Overflow

Questions tagged [angular2viewencapsulation]

31 questions
12
votes
1 answer

ShadowDOM vs Document Fragments -- How do they differ?

Looking into articles on ShadowDOM it seems like it's an enhancement to DocumentFragments. What is the real benefit of ShadowDOM? CSS specificity? Can't I do roughly the same things with Fragments? I'm looking for a list of capabilities for each.…
Gopherkhan
  • 4,317
  • 4
  • 32
  • 54
11
votes
3 answers

How to access components unique encapsulation ID in Angular 9

I'm trying to encapsulate my element ids by adding the instance id like this: I previously worked with this:…
zZeepo
  • 336
  • 1
  • 3
  • 9
9
votes
2 answers

Right way to override child component style from host component angular

What is the right way to override child component style from host component. I tried using encapsulation: ViewEncapsulation.None but i need to write the override stuff in style.sass file rather than host component. What should be the stackblitz
Hacker
  • 7,798
  • 19
  • 84
  • 154
7
votes
1 answer

How do you disable view encapsulation in a third party component in angular2/4?

I want to override the styles for an open source component I'm using, but the only way I can find to disable view encapsulation is on a component's decorator. Of course using a third party module means I can't edit the source for it. How else could…
Gabriel Alack
  • 472
  • 2
  • 6
  • 16
6
votes
0 answers

What is the difference between ViewEncapsulation.None and :host, :host /deep/?

I have an Angular 6 custom form control which I have created as a wrapper around another control so that we can apply our own css rules. I have removed the ViewEncapsulation on this wrapper component so that we can hook on to the css classes…
Bharat Gupta
  • 2,628
  • 1
  • 19
  • 27
5
votes
1 answer

How to namespace the _nghost/_ngcontent props in Angular?

I'm currently doing some experiments with sharing Angular apps as Web Components and I've faced an issue with the styles of one app affecting the other one. Given the fact that I use the emulated view encapsulation, Angular will add special…
DiogoDoreto
  • 883
  • 4
  • 16
4
votes
2 answers

How to get global selector inside emulated view encapsulation (CSS / Angular2)

I have a Home component with this inside: Hello from ng2-bootstrap Inside my home.style.scss, I have this: :host .alert { background-color: green; } which should change the background color to green, but it does…
Jakub
  • 79
  • 9
3
votes
3 answers

Disabling effect of ViewEncapsulation.None in Angular

How to disable the effect of ViewEncapsulation.None? E.g. One of my component (firstComponent) defines a css class with some properties. There is secondComponent which uses the same css class. I want my "secondComponent" to use the different…
Akshay Jain
  • 91
  • 1
  • 6
3
votes
1 answer

How to overwrite angular-material2 styles?

I'm using Angular2 with Material Design Components. And would like to overwrite some styles, but it looks like it's not possible because of ViewEncapsulation. Is it possible to switch off ViewEncapsulation(ViewEncapsulation.None) for 3rd party…
Stepan Suvorov
  • 25,118
  • 26
  • 108
  • 176
2
votes
1 answer

How is it possible to adjust a component's CSS based on a global CSS class-name in Angular?

We are using a class on the html-element to determine whether the user is in dark or light mode of the app. This class is added using Renderer2 in a service that detects the selected setting of the user. This works…
lampshade
  • 2,470
  • 3
  • 36
  • 74
2
votes
0 answers

is angular ViewEncapsulation necessary?

I was a big fan of ViewEncapsulation in angular components. But I see if we set it to ViewEncapsulation.None - we can also encapsulate styles by just component selector in SCSS. For example: my-component { h1 {} button {} etc.. } Also If I…
Potwór z Lochness
  • 71
  • 7
1
vote
0 answers

Angular: ViewEncapsulation vs wrapping SCSS

I find myself switching to ViewEncapsulation.None because I need to manipulate some child component's css, which does not seem possible with View encapsulation, as /deep/ was deprecated. Are there any actual (performance perhaps?) drawbacks on using…
Ákos Vandra-Meyer
  • 1,890
  • 1
  • 23
  • 40
1
vote
1 answer

View Encapsulation Emulated, is it possible to escape emulated encapsulation within a stylesheet?

I have a situation where i am using a jQuery plugin to resize a div. When using emulated view encapsulation this element is not getting the attribute prefix for the style in my stylesheet to target. This makes sense because i am modifying the DOM…
Sam
  • 1,736
  • 8
  • 15
1
vote
0 answers

Chrome Upgrade (v80) and Angular ViewEncapsulation.Native vs ViewEncapsulation.ShadowDom

With the latest version of Chrome Version 80.0.3987.87 (Official Build) (64-bit) my Angular application has suddenly stopped to work. On troubleshooting the issue found the error "createShadowRoot is not a function" in the console logs. In several…
TheMonkWhoSoldHisCode
  • 2,182
  • 3
  • 26
  • 40
1
vote
0 answers

How can I customize the style of a foreign component without using the now-deprecated ::ng-deep?

In my app, I am using a component that comes from ngx-bootstrap. I want to customize the look of the component (in this case, tabs), by making the tabs themselves appear green. Previously I could use /deep/ in my SCSS, to target all selectors used…
raphisama
  • 396
  • 3
  • 11
1
2 3