title: Contain the Style of my Angular Web Component so it doesn't bleed to the component to which it is used
body: <p>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.</p>
  
  <p>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 <code>row.[_ngcontent-c1]</code> one such example How do we make sure it dosent bleed to each other .</p>
  
  <p>I even manually tried to change the web component js file style from <code>[ngcontent-%COMP%]</code> to  <code>[ngcontent-mine%COMP%]</code> but nothing works it dosent change even in sources</p>
  
  <p>The sources i debugged are </p>
  
  <p><a href="https://github.com/angular/angular/pull/17745?#issuecomment-385561001" rel="nofollow noreferrer">https://github.com/angular/angular/pull/17745?#issuecomment-385561001</a> and <a href="https://github.com/angular/angular/pull/17745#issuecomment-418658799" rel="nofollow noreferrer">https://github.com/angular/angular/pull/17745#issuecomment-418658799</a> ... to help yourself.</p>
  
  <p>Also Looked at <a href="https://stackoverflow.com/questions/51676412/angular-elements-external-librarys-css">Angular Elements - External library&#39;s CSS</a></p>