代码之家 › 专栏 › 技术社区 › Rahul Singh

包含我的角Web组件的样式,这样它就不会渗透到它所使用的组件

angular-elements web-component angular

Rahul Singh · 技术社区 · 6 年前

我们已经使用AngularV6构建了一个新的网络组件。现在的问题是当我在空白的应用程序中使用这个组件时,它完美地工作,但是当我在一个现有的应用程序中使用它时,它完全破坏了CSS。

row.[_ngcontent-c1] 一个这样的例子,我们如何确保它给对方流血。

[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 - External library's CSS

1 回复 | 直到 6 年前

Collin Stevens 6 年前

如果您是使用@Angular/elements公开为Web组件的Angular组件的样式,则需要在传递给createCustomElement的Angular组件上将ViewEncapsulation设置为ViewEncapsulation.ShadowDom,该组件使用ShadowDomv1规范。

请注意,IE11不支持ShadowDOM v1,您必须相应地使用polyfill。

Web组件中的任何样式都将位于影子根目录中,而不会影响外部。

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

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

1 年前

Kael · 在html表格中显示关系api数据-角度

2 年前