我们已经使用Angular v6构建了一个新的Web组件。现在的问题是，当我在Blank应用程序中使用该组件时，它可以完美工作，但是当我在现有应用程序中使用它时，它将完全破坏CSS。
我能找到的原因是因为我正在使用bootstrap来构建我现有的应用程序，并且还使用bootstrap来构建该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 ...帮助自己。
答案 0 :(得分：0)
如果使用@ angular / elements从Angular组件中公开为Web组件的样式正在消失，则需要在Angular上将ViewEncapsulation设置为ViewEncapsulation.ShadowDom，它使用ShadowDOM v1规范。组件，该组件将传递给createCustomElement。
请注意，IE11不支持ShadowDOM v1，因此您必须进行相应的填充。
Web组件中的任何样式都将位于阴影根目录中，而不会影响外部样式。