3

我们已经使用 Angular v6 构建了一个新的 web 组件。现在的问题是，当我在空白应用程序中使用该组件时，它可以完美运行，但是当我在现有应用程序中使用它时，它会完全破坏 css。

我能找到的原因是，当我使用引导程序构建我现有的应用程序并使用引导程序构建该 Web 组件时，它导致 _ngcontent-* 与这两个组件匹配，然后相互流血。像row.[_ngcontent-c1]一个这样的例子我们如何确保它不会互相流血。

我什至手动尝试将 Web 组件 js 文件样式从更改为[ngcontent-%COMP%]， [ngcontent-mine%COMP%]但没有任何效果，即使在源代码中也没有改变

我调试的来源是

https://github.com/angular/angular/pull/17745?#issuecomment-385561001和https://github.com/angular/angular/pull/17745#issuecomment-418658799 ...帮助自己。

还查看了Angular Elements - 外部库的 CSS

4

1 回答 1

0

如果您使用 @angular/elements 暴露为 Web 组件的 Angular 组件的样式正在流失，则需要在 Angular 组件上将 ViewEncapsulation 设置为 ViewEncapsulation.ShadowDom，它使用 ShadowDOM v1 规范被传递给 createCustomElement。

请注意，IE11 不支持 ShadowDOM v1，您必须进行相应的 polyfill。

Web 组件中的任何样式都将位于 shadow-root 内，不会影响外部。

https://angular.io/api/core/ViewEncapsulation

于 2018-10-27T08:23:33.663 回答