bug(expansion-panel): `[style*=...]` attribute selector causes whole-page slowdown in Chromium

[HMPerson1]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

before #24045 (probably, I haven't tested it)

Description

Strictly speaking, this is a Chromium bug, but (AFAICT) the only workaround is to change the CSS in the expansion panel component.

Currently, in Chromium-based browsers, the presence of a CSS rule selector like .blah[style*="something"] * means that any change to the style attribute of any element, anywhere on the page will force a style recalculation of that element's entire subtree. There is currently a rule like this in expanion-panel:

components/src/material/expansion/expansion-panel.scss

Line 78 in 52c85e5

&[style*='visibility: hidden'] * {

Additionally, since expanion-panel has ViewEncapsulation.None, Angular won't limit the rule's scope using [_nghost]/[_ngcontent] attribute selectors, and Angular will copy the rule into any ShadowDom-encapsulated components.

components/src/material/expansion/expansion-panel.ts

Line 82 in 52c85e5

encapsulation: ViewEncapsulation.None,

This issue was first noted in this comment.

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-bsuofa?file=src%2Fapp%2Fexample-component.ts

Steps to reproduce:

1. Observe the animation is janky.

Proof that expansion-panel is responsible:

1. Delete the <mat-expansion-panel> element (and its children) from example-component.html.
2. Reload (to force Angular to clear unused component styles).
3. Observe the animation is now smooth.

Proof that the [style] selector is responsible:

1. Right-click > Inspect Element on "expanstion panel contents".
2. In DevTools, ensure that <div class="mat-expansion-panel-body"> is selected.
3. (optionally) Record a performance trace and observe that "Recalculate Style" affects 10,001 elements and takes a long time.
4. Close the expansion panel.
5. In DevTools, edit the CSS selector .mat-expansion-panel-content[style*="visibility: hidden"] * to remove [style*=...]
6. Observe the animation is now smooth.
7. (optionally) Record a performance trace and observe that "Recalculate Style" affects 1 element and is very fast.

Expected Behavior

The animation is smooth regardless of if an expansion panel exists or what the expansion panel component does internally.

Actual Behavior

The animation is smooth only after modifying an expansion-panel-internal CSS rule.

Environment

Angular CLI: 16.2.6
Node: 19.9.0 (Unsupported)
Package Manager: npm 9.6.3
OS: linux x64

Angular: 16.2.9
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1602.6
@angular-devkit/build-angular   16.2.6
@angular-devkit/core            16.2.6
@angular-devkit/schematics      16.2.6
@angular/cdk                    16.2.8
@angular/cli                    16.2.6
@angular/material               16.2.8
@schematics/angular             16.2.6
rxjs                            7.5.7
typescript                      5.1.6
zone.js                         0.13.3

[HMPerson1]

I don't have an easy way to test this, but I suspect this can be fixed by changing this animation to additionally change a CSS custom variable (e.g. --mat-expansion-panel-content-force-visibility) to 'hidden'/'' (so it's always the same as visibility):

components/src/material/expansion/expansion-animations.ts

Lines 57 to 62 in 52c85e5

	bodyExpansion: trigger('bodyExpansion', [
	state('collapsed, void', style({height: '0px', visibility: 'hidden'})),
	// Clear the `visibility` while open, otherwise the content will be visible when placed in
	// a parent that's `visibility: hidden`, because `visibility` doesn't apply to descendants
	// that have a `visibility` of their own (see #27436).
	state('expanded', style({height: '*', visibility: ''})),

and then changing this CSS rule to apply that variable to all children:

components/src/material/expansion/expansion-panel.scss

Lines 78 to 80 in 52c85e5

	&[style*='visibility: hidden'] * {
	visibility: hidden !important;
	}

 & * { 
   visibility: var(--mat-expansion-panel-content-force-visibility) !important; 
 } 

[crisbeto]

We should be able to fix this by setting a class on the component when it's opened/closed.