5

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 _nghost-c# and _ngcontent-c# props to my elements and also update the styles to use them. Now, since I may have multiple angular apps in a single page, those selectors can affect the other apps.

I've seen a few examples on the web where those props have a namespace in it, like _nghost-XXX-#, but I couldn't find a way to customize it.

Example of the issue

DiogoDoreto
  • 883
  • 4
  • 16
  • I've been looking into the source for an answer too. I've found that [here](https://github.com/angular/angular/blob/6143da66b2449e4da57b95d9a144866fd0c2da26/packages/platform-browser/src/dom/dom_renderer.ts#L242-L243) is where the change happens in the styles, and that it gets the id from a `RendererType2` variable. But I didn't manage to find where this id is set, to check if we could change it. – DiogoDoreto Nov 23 '18 at 09:50
  • 1
    This is set here https://github.com/angular/angular/blob/f45aedcbf07ec5b83300f981107e2a39028d2f4b/packages/core/src/view/util.ts#L58-L67 – yurzui Nov 27 '18 at 04:27
  • Good find @yurzui, thanks! So I see that there's no place to customize this id. I wonder how, [here](https://toddmotto.com/emulated-native-shadow-dom-angular-2-view-encapsulation#what-does-this-mean-3) and [here](https://medium.com/google-developer-experts/angular-advanced-styling-guide-v4-f0765616e635#0546), they show these attributes with a namespace. – DiogoDoreto Nov 27 '18 at 08:53
  • In earlier versions Angular used `APP_ID` token as namespace https://stackoverflow.com/questions/40139548/can-you-get-the-component-encapsulation-host-id And seems it was before angular4 – yurzui Nov 27 '18 at 12:23

1 Answers1

0

The fix for this issue was just released in Angular v8.

It was introduced in beta 12.

For previous versions of Angular, there's no way to solve, without introducing the changes by yourself.

aledpardo
  • 761
  • 9
  • 19