Angular encapsulation while using angular material and angular bootstrap

I have an angular widget that should be embedded in different sites and I have no knowledge about the sites that will embed it.

I cannot place the widget in an IFrame.

This means that the widget should be 100% encapsulated.

The widget is using components from certain libraries like:

angular bootstrap - https://angular-ui.github.io/bootstrap/

@angular/material

Some of the components from those libraries are using view encapsulation set to none which means one problem will be that my head will contain stuff like:

.mat-checkbox {...}

which is not good cause it might interfere with the host site styles.

Another problem is that I cannot afford class names like .mat-checkbox cause this means that the host site can load a material design template and change my widget appearance.

I examined other companies solution like hotjar

they do not place in iframe and they simply hash their classnames (probably using a library for css in js like typestyle) which is a great solution for me - but

how do i hash the classnames of the components from 3rd party libraries like material design and angular bootstrap?

Things I tried:

• Angular elements for creating a web component

• Typestyle

from Angular encapsulation while using angular material and angular bootstrap