isolate/scope Angular [Elements] 小部件的所有 SCSS 样式的最简单方法是什么？

Question

我有一个 Angular 7 元素小部件，稍后我将其嵌入到更大的应用程序中。当我单独测试小部件时，所有样式都正常工作，因为它正在访问每个组件的样式和 assets/styles/global.scss 中的全局样式。当我将小部件嵌入目标最终应用程序时，我遇到了很多样式冲突，并且应用程序和小部件的样式都被破坏了。

我试图将所有样式组件和全局样式简单地包装在我的小部件中，将它们包装在 class .ba 中，即 book-appointment 的简写，例如

我用 .ba:

包装我的约会向导 scss 组件

.ba {
    .appointment-wizard-title {
        font-size: 20px;
    }
    ...
}

我用 .ba:

包裹我的全局 scss

.ba {
    h1,
    h2 {
        font-size: 38px;
        font-weight: 100;
    }

    body {
        background: transparent;
    }

    .input-group {
      position: relative;
      display: table;
      border-collapse: separate;
    }
    ...
}

然后我用 ba class:

将我的小部件包装成 div

<div class="ba">
    <app-root></app-root>
</div>

当我使用 ng serve 单独测试小部件时，这部分有效，但丢失了很多样式细节。我无法指定所有样式只应用于 div classed ba 下存在的元素和 classes ... 我该怎么做？

Answer 1

<div class="ba">
    <app-root></app-root>
</div>

似乎包装了整个应用程序。如果你有一个小部件组件，你可以。

备选方案 1。仅对该组件使用本地样式。它只会存在于组件中。例如：

@Component({
  selector: 'my-component',
  template: 'my-component.html',
  styles: ['my-component.scss']
})

备选方案 2。使用更靠近小部件的 class 'ba'。通过在您的小部件组件中使用主机绑定装饰器。保持你的风格全球化

@HostBinding('class.ba') someField: boolean = true;

注意。即使 Alt1 看起来很诱人，您也需要留意其他 sass 文件的大量导入。您最终可能会在 dist

中复制 CSS 文件

isolate/scope Angular [Elements] 小部件的所有 SCSS 样式的最简单方法是什么？

What's the easiest way to isolate/scope all SCSS styles for an Angular [Elements] widget?

html

css

sass

angular

angular7