I have a host component that contains a header component using ViewEncapsulation.None and a mainContainer component using ViewEncapsulation.ShadowDom. The mainContainer component also includes an admin component with ViewEncapsulation.None. I observed that the styles from the admin component are being applied to both the Shadow DOM and the root DOM, which affects the styling of the header component. How can I prevent the admin component’s styles from leaking into the root DOM?
The admin component is a composite component that includes several other components, and I don’t want to use ViewEncapsulation.ShadowDom for it.
You can write a wrapper class that will contain the changes, this will solve your leaking to root problem.
You have to use scss for simplicity of use.
.admin-component {
// other classes here
}
In your HTML, you have to apply admin-component class to the root of your component HTML.
<div class="admin-component">
...
</div>
You can also try :host to narrow the scope of the CSS.
:host {
// other classes here
}
To prevent your CSS from leaking downwards, you have to use single level styling, meaning using > you always target the nearest dom element inside the component.
.admin-component {
& > div.container > div.col-12 > div.title-text {
color: white;
}
}
The above styling will not leak to the child element and will be scoped only to your component. But simpler method is simply to enable ViewEncapsulation.Default, instead of this method.