2

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...

Yashwardhan Pauranik
  • 5,370
  • 5
  • 42
  • 65
Kasper Sommer
  • 409
  • 1
  • 6
  • 18
  • 1
    can you provide us a stackblitz with an example :) ? we don't have enough information to help you right now – Alann Dec 24 '19 at 11:10
  • Unfortunately I cant :( I keep on getting an error in the build when bootstrapping as angular element. Also the problem is not when the component is running on its own but when its running in a parent web page. – Kasper Sommer Dec 24 '19 at 21:22

1 Answers1

4

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.

C.OG
  • 6,236
  • 3
  • 20
  • 38
  • Yes, I was into exactly that and the ShadowDom seemed to do what I wanted. However after reading your answer I got to thinking that then I obviously need to add the html-tag and body-tag in the component as well and not rely on the one in the parent web page. Now that works! However, now my problem is that the html-CSS of the parent page is inherited to the angular element component and I cannot override it... – Kasper Sommer Dec 24 '19 at 21:25
  • what css is inherited? and im not sure what you mean by you need to add the `html-tag` and `body-tag` – C.OG Dec 25 '19 at 15:37
  • I have tried to embed the Angular Element in a Wordpress page. Here the `html { ... }` CSS (e.g. font-size 10) is inherited. I meant that I need to add the `...` to the Angular Element. – Kasper Sommer Dec 25 '19 at 16:12
  • I think that font size inheritance is the browser default. It wouldn't inherit styles from the page. Are you able to deploy the code somewhere and provide me a link – C.OG Dec 25 '19 at 16:25
  • The page is deployed here: https://www.hoteltiffany.dk/booking-2-2-2-2/ - if I deselect `font-size: 10px;` from https://www.hoteltiffany.dk/wp-content/themes/west-pro/css/bootstrap/bootstrap.min.css?ver=1 in the elements inspector all looks as it is supposed to... – Kasper Sommer Dec 25 '19 at 17:30