Angular Elements - External library's CSS

Question

I was hoping to use Angular Elements with an external library (Kendo UI). I managed to create a component and add it to my app. The problem is that Kendo's CSS messed up with all my app styling.

Any idea on how could I encapsulate the CSS to only apply to the component and not "leak" to the rest of the parent app?

Thanks

UPDATE

See the following stackblitz for the code: https://stackblitz.com/edit/angular-kpmnjg

If I build the code I get 4 .js files and styles.css file (containing Kendo UI's styles). Adding the files to a clean html page works fine. But as soon as I add them to my app, the styles.css bleed out to my app, messing with the styles (buttons/inputs/etc).

Answer 1

Without having knowledge of Kendo UI and having only read about angular elements, in general how I'd encapsulate the CSS is use SASS and do

.angular-element-class {
  @import 'path/to/kendo.css';
}

or hopefully if Kendo UI has SASS api

@import 'path/to/kendo.scss';

.angular-element-class {
  @include kendo-mixin-needed-for-angular-element;
}