It seems when inserting a stylesheet with <style> into the page it doesn't always apply immediately, maybe it's due to the FOUC avoidance stuff interfering? AMP is polling document.styleSheets instead to check when the sheet has actually loaded which seems bad.

The amp code is here:
https://github.com/ampproject/amphtml/blob/e00a3da988672d60fae47105c663793c1119e64a/src/style-installer.js#L58

export function installStyles(doc, cssText, cb, opt_isRuntimeCss, opt_ext) {
  const style = insertStyleElement(
      doc,
      dev().assertElement(doc.head),
      cssText,
      opt_isRuntimeCss || false,
      opt_ext || null);

  // Styles aren't always available synchronously. E.g. if there is a
  // pending style download, it will have to finish before the new
  // style is visible.
  // For this reason we poll until the style becomes available.
  // Sync case.
  if (styleLoaded(doc, style)) {
    cb(style);
    return style;
  }
  // Poll until styles are available.
  const interval = setInterval(() => {
    if (styleLoaded(doc, style)) {
      clearInterval(interval);
      cb(style);
    }
  }, 4);
  return style;
}

function styleLoaded(doc, style) {
  const sheets = doc.styleSheets;
  for (let i = 0; i < sheets.length; i++) {
    const sheet = sheets[i];
    if (sheet.ownerNode == style) {
      return true;
    }
  }
  return false;
};

insertStyleElement effectively does:

  const style = doc.createElement('style');
  style./*OK*/textContent = cssText;
  document.head.appendChild(style);