async function renderLHReport(lhr, container) {
  try {
    for (const el of container.childNodes) el.remove();

    const reportRootEl = lighthouseRenderer.renderReport(lhr, {
      omitTopbar: true,
      disableFireworks: true,
      disableDarkMode: true,
    });
    // TODO: display warnings if appropriate.
    for (const el of reportRootEl.querySelectorAll('.lh-warnings--toplevel')) {
      el.setAttribute('hidden', 'true');
    }

    // Move env block
    const metaItemsEl = reportRootEl.querySelector('.lh-meta__items');
    if (metaItemsEl) {
      reportRootEl.querySelector('.lh-metrics-container')?.parentNode?.insertBefore(
        metaItemsEl,
        reportRootEl.querySelector('.lh-buttons')
      );
      reportRootEl.querySelector('.lh-metrics-container')?.closest('.lh-category')?.classList
          .add('lh--hoisted-meta');
    }

    container.append(reportRootEl);

    // Override some LH styles. (To find .lh-vars we must descend from reportRootEl's parent)
    for (const el of container.querySelectorAll('article.lh-vars')) {
      // Ensure these css var names are not stale.
      el.style.setProperty('--report-content-max-width', '100%');
      el.style.setProperty('--edge-gap-padding', '0');
    }
    for (const el of reportRootEl.querySelectorAll('footer.lh-footer')) {
      el.style.display = 'none';
    }
  } catch (e) {
    // eslint-disable-next-line no-console
    console.error(e);
    container.textContent = 'Error: LHR failed to render.';
  }
}
@param {any} lhr
@param {Element} container