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
– Sid Ali, Commented Aug 3, 2018 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
– HobojoeBr, Commented Aug 3, 2018 at 19:21
@HobojoeBr , check the path, something like this worked fine, styleUrls: ['./elements-test.component.css','./../../_kendo.scss'] , you can see here stackblitz.com/edit/angular-kpmnjg — Sid Ali
– Sid Ali, Commented Aug 3, 2018 at 19:31

Wilhelmina Lohan · Accepted Answer · 2018-08-03 16:15:16Z

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 3, 2018 at 16:15

Wilhelmina Lohan

3,1233 gold badges33 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

HobojoeBr Over a year ago

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.

mchl18 Over a year ago

Since kendo is not really scoping their styles i am afraid that will result in the same issue.

mchl18 · Accepted Answer · 2018-08-16 19:59:55Z

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, 2018 at 19:59

answered Aug 3, 2018 at 16:19

mchl18

2,3661 gold badge16 silver badges23 bronze badges

5 Comments

HobojoeBr Over a year ago

thanks for the reply. I tried implementing your approach (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??

mchl18 Over a year ago

Can you name/show any example of the leaking styles? Per default the view encapsulation keeps them intact

Wilhelmina Lohan Over a year ago

There is no view encapsulation on styles.scss

mchl18 Over a year ago

No but in every other component. are you styling globally?

mchl18 Over a year ago

I think I know why @WilliamLohan. I updated the answer

Fzum · Accepted Answer · 2019-02-07 16:48:48Z

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 7, 2019 at 16:48

Fzum

2,1551 gold badge15 silver badges17 bronze badges

Collectives™ on Stack Overflow

Angular Elements - External library's CSS

3 Answers 3

2 Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related