Function attachComposedAncestors

packages/cli/src/commands/keyframes.ts:446–459

(tweens: SurfacedTween[], html: string)

// trajectory (e.g. a child carries a flap while the parent carries the path), so
// annotate each tween with the animated ancestor elements above it in the DOM.
function attachComposedAncestors(tweens: SurfacedTween[], html: string): void {
  const animated = [...new Set(tweens.filter((t) => t.method !== "set").map((t) => t.target))];
  if (animated.length < 2) return; // need ≥2 distinct animated elements to compose
  const doc = new DOMParser().parseFromString(html, "text/html");
  for (const t of tweens) {
    const ancestors = animatedAncestors(doc, t.target, animated);
    if (ancestors.length) {
      t.composedWith = ancestors.map((sel) => ({
        selector: sel,
        summary: summarizeMotion(tweens, sel),
      }));
    }
  }
}

const safeMatches = (el: Element, sel: string): boolean => {
  try {