首页 文章

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

提问于
浏览 次
1

我使用Angular Elements（6.0.3）创建了一个Web组件 . 当我在另一个网站中使用Web组件时，webcomponent会覆盖父页面的样式，因为它也使用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 回答

  • 1

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

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

相关问题