Pause animations in open shadow roots

[jakearchibald]

Feature request

https://www.chromatic.com/docs/animations/ - Chromatic has functionality to pause animations, along with options to change how they're paused.

However, this doesn't work for animations within open shadow roots.

Proposed solution

Assuming that Chromatic gets animations via document.getAnimations(), you can get shadow roots via:

function getAllDeepShadowRoots(root: Element) {
  const els = [...root.querySelectorAll('*')];
  const shadowRoots: ShadowRoot[] = [];

  for (const el of els) {
    if (!el.shadowRoot) continue;

    shadowRoots.push(el.shadowRoot);
    els.push(...el.shadowRoot.querySelectorAll('*'));
  }

  return shadowRoots;
}

And call getAnimations() on the shadow roots too.

I couldn't find where Chromatic actually implements this.

[winkerVSbecks]

@jakearchibald this is implemented on Chromatic's cloud infrastructure and not in the CLI. I'll pass this on as a feature request.