DOM Nodes memory leak when using Shadow DOM #36655
Description
🐞 bug report
Affected Package
@angular/core
Description
I've found that there's a DOM Node memory leak happening when using encapsulation: ViewEncapsulation.ShadowDom in "child" components of a component that also has styling.
In my example I have a project with a component (AppComponent) that has a router outlet for two components (Test1 & Test2) which are using the shadow DOM. I start a performance test, toggle between the two test components and manually trigger garbage collection a couple of times. If AppComponent has no styling then there is no problem. But if AppComponent has a styleUrl then the number of DOM nodes will build up and not being garbage collected.
🔬 Minimal Reproduction
I was not able to reproduce the problem on stackblitz but have created a repo: https://github.com/oscar-green/angular-shadow-dom-leak
🌍 Your Environment
Tried on both mac and windows.
Chrome 80.0.3987.16
Angular Version:
Angular CLI: 9.1.1
Node: 12.16.1
OS: win32 x64
Angular: 9.1.1
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.901.1
@angular-devkit/build-angular 0.901.1
@angular-devkit/build-optimizer 0.901.1
@angular-devkit/build-webpack 0.901.1
@angular-devkit/core 9.1.1
@angular-devkit/schematics 9.1.1
@ngtools/webpack 9.1.1
@schematics/angular 9.1.1
@schematics/update 0.901.1
rxjs 6.5.5
typescript 3.8.3
webpack 4.42.0
Anything else relevant?
AppComponent without style
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
// styleUrls: ['./app.component.css']
})
export class AppComponent {}
AppComponent with style
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {}
