代码之家 › 专栏 › 技术社区 › nimrod

防止父页中的web组件覆盖CSS

angular-elements web-component angular css

1

nimrod · 技术社区 · 7 年前

我使用角度元素(6.0.3)创建了一个web组件。当我在另一个网站中使用web组件时,webcomponent会覆盖父页面的样式,因为它也使用引导。我知道有视图封装原则,但据我所知,“原生”封装是 not yet fully supported . 所以现在我使用默认的“模拟”。

:host ::ng-deep 在我的风格之前,它们只应用于web组件本身,这很好。但是,我加载的所有css和scss文件角度.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"
]

1 回复 | 直到 7 年前

1

Steve Schrab 7 年前

“styles”导入角度.json适用于您希望在整个应用程序中全局定义的样式。使用 ViewEncapsulation

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