Contain the Style of my Angular Web Component so it doesn't bleed to the component to which it is used

user_2708210 0
Viewed 656

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

angular-elements web-component angular
1 Answers

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

user_64563600
Related