bug(theming): memory leak in devTools when applying theme in html or :root

[richarddesan]

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

unknown

Description

Maybe its a good idea to change the docs a bit from

@use '@angular/material' as mat;

html {
  color-scheme: light dark;
  @include mat.theme((
    color: mat.$violet-palette,
    typography: Roboto,
    density: 0
  ));
}

to

@use '@angular/material' as mat;

body {
  color-scheme: light dark;
  @include mat.theme((
    color: mat.$violet-palette,
    typography: Roboto,
    density: 0
  ));
}

Took me some time to figure out why i have a memory leak after inspecting elements inside devTools
I think this is more a bug within devTools, but for now i would not recommend to add the theming inside the HTML tag

Reproduction

StackBlitz link:
Steps to reproduce:

1. https://stackblitz.com/edit/u51vvnk5-2rbgyoyg?file=src%2Fstyles.scss
2. 2. open devTools and activate the inspect tab
3. Have a look at your memory usage (windows)

Expected Behavior

No memory leak in devTools

Actual Behavior

Memory leka in devTools :-)

Environment

• Angular:
  22.1.5
• CDK/Material:
  22.1.5
• Browser(s):
  Chrome latest
• Operating System (e.g. Windows, macOS, Ubuntu):
  Windows