0

Currently I am working on a specialized web component built with angular elements, where I have some dependencies to prime ng and primeflex library, due to this I cannot enable ViewEncapsulation.ShadowDom, because prime ng has any issues with it. Also host application uses boostrap, and this bleeds into web component styles

What are the changes, solution to isolate somehow host styles to not bleed into web component?

Thanks.

I have tried different scoping solution, like importing bootstrap in app component styles, but with not so much success.

Zsolt Balint
  • 767
  • 1
  • 6
  • Not if 3rd part libraries do not support shadowDOM. Only option then is a classic IFRAME – Danny '365CSI' Engelman Feb 06 '23 at 08:15
  • I managed to find a solution, by scoping bootrap under within host, by importing it under a host class added to app-component. And load web component in a secondary router named router outlet which was outside of app component. Works pretty well, but this requires few changes for those component which generates some dropdown to be appended locally and not in the body. – Zsolt Balint Feb 09 '23 at 06:56

0 Answers0