[grid] Memory leak in Chrome related to using CSS + combinator

[vursen]

Description

Grid instances get stuck in browser memory as detached elements retained by the internal StyleEngine class after being removed from the DOM. This happens if a header row has even received the hidden attribute while the following CSS selector still didn't match any element:

web-components/packages/grid/theme/lumo/vaadin-grid-styles.js

Lines 222 to 224 in 056c1ef

	[part~='row'][hidden] + [part~='row'] [part~='header-cell'] {
	border-top: 0;
	}

Minimal reproducible example

<script type="module">
  import '@vaadin/grid';

  const container = document.querySelector('#container');
  const runTest = document.querySelector('.run-test');

  runTest.addEventListener('click', async () => {
    container.innerHTML = `<vaadin-grid></vaadin-grid>`.repeat(1000);

    setTimeout(() => {
      container.innerHTML = '';
    }, 2000);
  });
</script>

<button class="run-test">Add 1000 grids and remove them in 2 sec</button>
<div id="container"></div>

Steps to reproduce

Task Manager:

Screen.Recording.2025-03-20.at.17.19.39.mov

DevTools Memory Profiler:

Screen.Recording.2025-03-21.at.10.03.51.mov

Environment

Vaadin version(s): not specific to a particular Vaadin version
OS: Mac OS

Browsers

Chrome

[vursen]

This is a known Chrome bug: https://issues.chromium.org/issues/40257823