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.