Angular: Encapsulation cause a CSS collision

George Valentin Published at Dev

25

George Valentin

I have a problem with some components. I have 2 different components, both with encapsulation: ViewEncapsulation.None activated. They have in common the class parent. I don't know why, but with encapsulation they share the class between them.

To be more specific:

comp1 have a container with class parent

comp2 have a container with class parent

Without encapsulation, the css is isolated, what is good! But when I add encapsulation the comp1 will have 2 styles, one from itself and one from comp2.

How I could fix this collision between styles?

baj9032

Just use encapsulation: ViewEncapsulation.Emulated.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-05-1

Comments

0 comments

Login to comment

Related

maven-jaxb2-plugin cannot generate classes due to two declarations cause a collision in ObjectFactory class

Nested Iterator loops for collision cause IllegalStateException

What is the cause for "angular is not defined"

xjc: Two declarations cause a collision in the ObjectFactory class

wsimport - Two declarations cause a collision, same line given

wsimport Two declarations cause a collision

CSS Encapsulation Limitations in Polymer and Its Shadow DOM

Calculating angular velocity after a collision

Angular2 setting view encapsulation globally

How to get global selector inside emulated view encapsulation (CSS / Angular2)

css encapsulation in Angular

Possible collision between nodejs and angular routing

How default view encapsulation works in Angular

Fullcalendar Angular - Tooltip.js CSS is not applied (CSS encapsulation issue)

How does Angular Component CSS encapsulation work?

Angular: CSS encapsulation bug- grid component :hover styling is applied to sibling grid components

Looking for Angular Directive which enables model encapsulation

Angular: obtain cause of a $watch to be triggered

OpsHub migration failure: The set of pending renames would cause a name collision

Why Does Including This Header File (w/ Header Guard) In 2 .CPP Files Cause Naming Collision?

Angularjs controller and template encapsulation vs Angular component

Angular creating component with CLI gives encapsulation: ViewEncapsulation.None

style encapsulation on angular custom th component

Jaxb: Two declarations in a wsdl cause a collision in the objectFactory class

vendor prefixes cause css to fail

Angular encapsulation and click-outside directive

What if you want name collision for Angular InjectionToken?

Undefined collision in Angular 8

Would redraw() not cause CSS reapply?

TOP Ranking

Article

HotTag

Archive