🐞 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
styleUrls or styles in the @Component decorator 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:
|
this._hostNodes.add(_doc.head); |
🔬 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
🐞 bug report
Affected Package
The issue is caused by package
@angular/platform-browserIs 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
styleUrlsorstylesin the@Componentdecorator are added to the#shadow-root✔️#shadow-root✔️<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
ShadowDomRendererusing theDomSharedStylesHostwhich adds_doc.headto its list of known_hostNodesin the constructor:angular/packages/platform-browser/src/dom/shared_styles_host.ts
Line 39 in d43187f
🔬 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: