0

Briefly:

  • I created an Angular Elements web component in Angular 15
  • I have ViewEncapsulation.Emulated set for the component (for some reason, ViewEncapsulation.ShadowDom doesn't work - it breaks some of the contained third party controls)
  • CSS for the hosting page (asp.net) is leaking into my control, messing up the styling

I tried adding (just for the 'p' selector, as a simple experiment)

:host p {
color: revert;
}

to the .scss file for the component. It has the effect of blocking CSS from the parent page (good), however, if I add the following to the same file:

p {
color: blue;
}

I can see in the developer tools that the "revert' happens after setting the blue color, so the setting of the blue color is effectively negated.

Looking for a way to block styling from the parent for particular tags, and have the component's embedded styling take over and do its thing.

Ivan Pelly
  • 147
  • 2
  • 12
  • ``color`` is an _inheritable style_, so it doesn't "leak" in, it is supposed to work that way. Just add more **specificity** to your CSS selectors – Danny '365CSI' Engelman Apr 19 '23 at 17:58
  • Maybe "leak" is the wrong word, but I'm trying to have my component get styled by the creator of the component, not by the page in which the component is hosted. I realize it's supposed to work that way, and if I understand the Shadow DOM concept, there are times when a designer might not want it to work that way. If (I think I'm right in saying) ViewEncapsulation.ShadowDom worked, I wouldn't need a workaround. I'm not sure providing more specificity would help, but if you have an example, I'm willing to give it a shot! – Ivan Pelly Apr 19 '23 at 21:43
  • Please add an [Minimal minimal-reproducible-example StackOverflow Snippet](https://stackoverflow.com/help/minimal-reproducible-example) to your post. It will help readers execute your code with one click. And help create answers with one click. See [How to add a StackOverflow snippet](https://meta.stackoverflow.com/questions/269753/feedback-requested-runnable-code-snippets-in-questions-and-answers) – Danny '365CSI' Engelman Apr 20 '23 at 07:21

0 Answers0