Angular Elements - External library's CSS

angular elements tutorial
angular elements library
angular elements ivy
angular elements medium
angular elements ie11
angular elements demo
@angular/elements npm
angular elements jsp

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

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

Wanna create Angular Elements? Here's how!, npm i core-js rxjs zone.js. Now, for the elements we will need the Angular library and a polyfill: npm i @angular/elements @webcomponents/custom-elements  Angular elements are Angular components packaged as custom elements (also called Web Components), a web standard for defining new HTML elements in a framework-agnostic way.

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.

Angular Elements: The comprehensive guide to getting multiple , library: 'product', },. Exporting the Platform as an external dependency gave me these errors: VM10149 element.js:1 Uncaught Error: A  An Angular library is an Angular project that differs from an app in that it cannot run on its own. A library must be imported and used in an app. A library must be imported and used in an app. Libraries extend Angular's base functionality.

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'

Using Angular Elements — Why and How?, Meaning, you can use Angular Components in other frameworks and libraries, such as React, Vue, and Ember! #2. Use Angular in the Server-  In Angular CLI 6, ng add command was introduced. ng add  adds the npm package for a published library to your workspace, and configures your default app project to use that library, in whatever way is specified by the library’s schematic. For example, adding  @angular/pwa  configures your project for PWA support.

Your options for building Angular Elements, Angular Elements, Part I: A Dynamic Dashboard In Four Steps With Web I'm using the term external web component for referring to this. Fortunately, the Angular package format prescribes to expose Angular libraries also as UMD bundles  Angular elements are ordinary Angular components packaged as custom elements, a web standard for defining new HTML elements in a framework-agnostic way This approach let us develop reusable components in the way that’s familiar to us, and yet, embedding these in every kind of website (vanilla JavaScript, React, Vue, WordPress, etc. ).

Angular Elements, Part II, Angular Elements, Part I: A Dynamic Dashboard In Four Steps With Web For this, I demonstrate two approaches: Lazy Loading and loading external and all libraries it depends on -- like @angular/core or @angular/elements -- into one  Generating a library with the Angular CLI automatically adds its path to the tsconfig file. The Angular CLI uses the tsconfig paths to tell the build system where to find the library. If you find that changes to your library are not reflected in your app, your app is probably using an old build of the library.

Angular Elements : Build Custom Elements using Angular 6, We will use this custom element in external HTML file. Custom Element : Angular Elements  Oh, and btw. the resulting elements.gz.js weights 62kB, which, considering that we have the full power of Angular framework inside it, is a pretty remarkable result! As usual, you can browse the

Comments
  • Where Are you adding the kendo, if it is as I suspect globaly, try add it only in the components you use, in styleUrls
  • Can you please reproduce it in a stackblitz or post code?
  • @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 , check the path, something like this worked fine, styleUrls: ['./elements-test.component.css','./../../_kendo.scss'] , you can see here stackblitz.com/edit/angular-kpmnjg
  • 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.
  • Since kendo is not really scoping their styles i am afraid that will result in the same issue.
  • 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??
  • Can you name/show any example of the leaking styles? Per default the view encapsulation keeps them intact
  • There is no view encapsulation on styles.scss
  • No but in every other component. are you styling globally?
  • I think I know why @WilliamLohan. I updated the answer