2

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.

Improve this question
3
  • 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 Commented Apr 19, 2023 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! Commented Apr 19, 2023 at 21:43
  • Please add an Minimal minimal-reproducible-example StackOverflow Snippet 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 Commented Apr 20, 2023 at 7:21
Related questions
2
Styling child elements using global CSS in Angular 2
4
How to encapsulate Angular app's global CSS within exported web component?
3
Angular Elements - External library's CSS
Load 4 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.