Styles from external components are included outside the scope of a shadow DOM component #35039
Description
🐞 bug report
Affected Package
The issue is caused by package @angular/platform-browser
Is this a regression?
No
Description
When deploying an Angular component with encapsulation: ViewEncapsulation.ShadowDom, everything regarding the component should be kept inside the #shadow-root. This includes all stylings.
Actual behavior
- Styles added by
styleUrlsorstylesin the@Componentdecorator are added to the#shadow-root✔️ - Styles coming from external components like @angular/material are added to the
#shadow-root✔️ - Styles coming from external components are also added to document's
<head>outside of the#shadow-root❌
Expected behavior
Only 1. and 2. should happen.
Root cause analysis
As far as I can see, this is caused by the ShadowDomRenderer using the DomSharedStylesHost which adds _doc.head to its list of known _hostNodes in the constructor:
🔬 Minimal Reproduction
https://stackblitz.com/edit/angular-material-shadowdom-styles
In the <head> section there are <style> tags of Material components, which should only be inside the shadow DOM.
🌍 Your Environment
Angular Version:
Angular CLI: 8.3.23
Node: 12.7.0
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.803.23
@angular-devkit/build-angular 0.803.23
@angular-devkit/build-optimizer 0.803.23
@angular-devkit/build-webpack 0.803.23
@angular-devkit/core 8.3.23
@angular-devkit/schematics 8.3.23
@angular/cdk 8.2.3
@angular/cli 8.3.23
@angular/material 8.2.3
@ngtools/webpack 8.3.23
@schematics/angular 8.3.23
@schematics/update 0.803.23
rxjs 6.4.0
typescript 3.5.3
webpack 4.39.2