Angular Elements - 外部库的 CSS

Question

我希望将 Angular Elements 与外部库 (Kendo UI) 结合使用。我设法创建了一个组件并将其添加到我的应用程序中。问题是 Kendo 的 CSS 弄乱了我所有的应用样式。

关于如何封装 CSS 以仅应用于组件而不“泄漏”到父应用程序的其余部分，我有什么想法吗？

谢谢

UPDATE

有关代码，请参阅以下 stackblitz: https://stackblitz.com/edit/angular-kpmnjg

如果我构建代码，我会得到 4 个 .js 文件和 styles.css 文件(包含 Kendo UI 的样式)。将文件添加到干净的 html 页面可以正常工作。但是，一旦我将它们添加到我的应用程序中，styles.css 就会渗入我的应用程序，扰乱样式(按钮/输入/等)。

Answer 1

在不了解 Kendo UI 并且只阅读 Angular 元素的情况下，一般来说，我封装 CSS 的方式是使用 SASS 并执行

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

或者希望 Kendo UI 有 SASS api

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

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