3

We have build a new webcomponent using Angular v6. Now the problem is when i use the component in a Blank app it works flawlessly but when i use it in a existing app it disrupts the css completely.

The reason i could find is as i am uing bootstrap to build my existing app and also using bootstrap to build that webcomponent it is causing the _ngcontent-* to match for both these components and then bleed to each other. like row.[_ngcontent-c1] one such example How do we make sure it dosent bleed to each other .

I even manually tried to change the web component js file style from [ngcontent-%COMP%] to [ngcontent-mine%COMP%] but nothing works it dosent change even in sources

The sources i debugged are

https://github.com/angular/angular/pull/17745?#issuecomment-385561001 and https://github.com/angular/angular/pull/17745#issuecomment-418658799 ... to help yourself.

Also Looked at Angular Elements - External library's CSS

Rahul Singh
  • 19,030
  • 11
  • 64
  • 86

1 Answers1

0

If you're styles from your Angular component that you have exposed as a Web Component using @angular/elements are bleeding out, you need to set your ViewEncapsulation to ViewEncapsulation.ShadowDom, which uses the ShadowDOM v1 specification, on the Angular component which is being passed to createCustomElement.

Please note that ShadowDOM v1 is NOT supported in IE11 and you must polyfill accordingly.

Any styles in your Web Component will be within the shadow-root and not affect the outside.

https://angular.io/api/core/ViewEncapsulation

Collin Stevens
  • 737
  • 9
  • 19
  • is there something know as `ViewEncapsulation.ShadowDOM` in Angular can you please point to somelinks in ANgular Doc as i donot see any links on that – Rahul Singh Oct 29 '18 at 06:31
  • okay my bad there is something like this newly added i guess thats the reason they say to follow doc , here the link if someone needs it [LINK](https://angular.io/api/core/ViewEncapsulation#ShadowDom) – Rahul Singh Oct 29 '18 at 06:32