Open
Description
Which @angular/* package(s) are the source of the bug?
core
Is this a regression?
No
Description
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. The admin component is a composite component that includes several other components, and I don’t want to use ViewEncapsulation.ShadowDom for it.
I’ve 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
Please provide a link to a minimal reproduction of the bug
No response
Please provide the exception or error you saw
I’ve 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
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 12.2.18
Node: 14.21.3
Package Manager: npm 6.14.18
OS: win32 x64
Angular: 12.2.17
... animations, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router
Package Version
------------------------------------------------------------
@angular-devkit/architect 0.1202.18
@angular-devkit/build-angular 12.2.18
@angular-devkit/core 12.2.18
@angular-devkit/schematics 12.2.18
@angular/cdk 12.2.13
@angular/cli 12.2.18
@angular/material 12.2.13
@angular/material-moment-adapter 12.2.13
@schematics/angular 12.2.18
rxjs 6.6.7
typescript 4.2.4
Anything else?
How can I prevent the admin component's styles from leaking into the root DOM while keeping its current encapsulation settings?