防止父页面中的 Web 组件覆盖 CSS答案

【问题标题】：Prevent CSS overwrites from web components in parent page防止父页面中的 Web 组件覆盖 CSS
【发布时间】：2018-06-29 14:59:38
【问题描述】：

我使用 Angular Elements (6.0.3) 创建了一个 Web 组件。当我在另一个网站中使用 Web 组件时，该 Web 组件会覆盖父页面的样式，因为它也使用 Bootstrap。我知道有视图封装原理，但据我所知“Native”封装是not yet fully supported。所以现在我使用默认的“Emulated”。

我发现如果我在我的样式前面添加:host ::ng-deep，它们只会应用于 Web 组件本身，这很棒。但是，我在 angular.json 中加载的所有 css 和 scss 文件似乎也覆盖了父页面。有什么办法可以防止导入样式文件的这种行为？

我在 angular.json 中的样式导入：

"styles": [
  "node_modules/intl-tel-input/build/css/intlTelInput.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "node_modules/angular-calendar/css/angular-calendar.css",
  "src/styles.scss",
  "node_modules/font-awesome/css/font-awesome.min.css",
  "src/assets/css/wizard.css",
  "src/assets/css/calendar.css",
  "src/assets/css/ng2-select.css"
]

【问题讨论】：

标签： css angular web-component angular-elements

【解决方案1】：

angular.json 中的“样式”导入用于您希望在整个应用程序中全局定义的样式。要使用ViewEncapsulation，您需要将其样式表链接到其组件内部，如下所示：

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.css'],
})

【讨论】：