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

create a _kendo.scss and import all necessary stylesheets:

@import '~@progress/kendo-theme-bootstrap/scss/dropdownlist';
@import '~@progress/kendo-theme-bootstrap/scss/grid';
@import '~@progress/kendo-theme-bootstrap/scss/input';
@import '~@progress/kendo-theme-bootstrap/scss/popup';
@import '~@progress/kendo-theme-bootstrap/scss/tabstrip';
....

You need to have the kendo npm modules installed for this to work.

then in your styles.scss

@import './kendo';

UPDATE:

My guess is that they are bleeding through because they are globally imported. So lets say you have

<kendo-grid>
...
    <table>
      <th>

The styles from the grid will bleed through to your table because kendo does css as such:

.kendo-grid th { ...

So really there is not a way around it except for creating counter-rules which is more than terrible, we had to do it in our project too. We are getting rid of kendo, it is not well fit for angular.

maybe you can get around it by only importing

@import '~@progress/kendo-theme-bootstrap/scss/grid';

in the component itself an not globally. Although I have not tested that. Also it will replicate the SCSS in every component that imports it and blow up bundle size.

Answer 2

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;
}

Answer 3

It worked for me just to remove the .css file extension.

So instead of having your import statement as

@import 'path/to/file.css'

you could try to do something like

 @import 'path/to/file'