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).

Where Are you adding the kendo, if it is as I suspect globaly, try add it only in the components you use, in styleUrls — Sid Ali, Aug 03 '18 at 16:14
@TemkitSidali how would I add it directly through styleUrls? I tried but I always get an error that it can't find the file. — HobojoeBr, Aug 03 '18 at 19:21
@HobojoeBr , check the path, something like this worked fine, styleUrls: ['./elements-test.component.css','./../../_kendo.scss'] , you can see here https://stackblitz.com/edit/angular-kpmnjg — Sid Ali, Aug 03 '18 at 19:31

score 1 · Answer 1 · answered Aug 03 '18 at 16:15

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

answered Aug 03 '18 at 16:15

Wilhelmina Lohan

2,803
2
29
58

Hi I tried your approach but I get some errors like: `".angular-element-class .k-button[disabled]" failed to @extend "%disabled". The selector "%disabled" was not found. Use "@extend %disabled !optional" if the extend should be able to fail.` – HobojoeBr Aug 03 '18 at 19:20
Since kendo is not really scoping their styles i am afraid that will result in the same issue. – mchl18 Aug 16 '18 at 20:02

mchl18 · Answer 2 · 2018-08-16T19:59:55.980

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.

edited Aug 16 '18 at 19:59

answered Aug 03 '18 at 16:19

mchl18

2,119
12
20

thanks for the reply. I tried implementing your approach (https://stackblitz.com/edit/angular-kpmnjg) and after building, i get some js files and a styles.css. It works on a blank html. But if I add them to an app, the styles.css file bleed into my app styles as it has a lot of styles for html tags. I don't see how it would solve my problem. Have I done something wrong?? – HobojoeBr Aug 03 '18 at 18:26
Can you name/show any example of the leaking styles? Per default the view encapsulation keeps them intact – mchl18 Aug 05 '18 at 17:19
There is no view encapsulation on `styles.scss` – Wilhelmina Lohan Aug 06 '18 at 17:24
No but in every other component. are you styling globally? – mchl18 Aug 06 '18 at 20:09
I think I know why @WilliamLohan. I updated the answer – mchl18 Aug 16 '18 at 20:00

score 0 · Answer 3 · answered Feb 07 '19 at 16:48

0

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'

answered Feb 07 '19 at 16:48

Fzum

1,695
1
12
15

Angular Elements - External library's CSS

3 Answers3

Linked