CODEWITHSUNDEEP
angularweb-componentangular-elements
Kasper Sommer
Kasper Sommer

Reputation: 453

Angular Elements - ViewEncapsulation

I have made an Angular Elements web component. It works fine just apart from the styling. The only time the styling actually works is when using ViewEncapsulation.None. However, when doing this the styling is affected by the parent web page.

Is there a way to make the Angular Component work totally independent from the parent web page styling?

Thank you in advance...

Upvotes: 2

Views: 1672

Answers (1)

C.OG
C.OG

Reputation: 6529

1. If you want your angular element to inherit styles from the parent scope, but not leak it's own styles to the parent: 

ViewEncapsulation.Emulated

2. If you want your angular element to be completely independent from the parent: 

ViewEncapsulation.ShadowDom

3. If you want your angular element to inherit only base element styles (tags) from the parent scope: 

ViewEncapsulation.Emulated

And ensure that all of your styles in the element are prefixed with a unique name. So a class of .hero becomes my-uniq-hero.

ViewEncapsulation.Emulated is the default value, so you dont need to explicitly set it.

Upvotes: 4

Related Questions