序列化编程CSS样式表(使用CSSOM API的样式表)？

Question

可以使用document.documentElement.outerHTML将文档序列化为HTML。

但是，如果我们将结果粘贴到文件中并尝试将其呈现为HTML，那么它并不总是忠实于原始显示(忽略真正的动态元素，比如canvas)。为什么？任何在JS中使用CSS的网站都会有影响网页样式的空样式标记。这些样式表是使用CSSOM API操作的。

我想序列化网页，同时也包括通过编程操作的样式表。做这件事最好的方法是什么？

Answer 1

我的解决方案：

export function getCSSOMStyles(): string {
  const { styleSheets } = document;
  const CSSOMSheets = Array.from(styleSheets).filter((sheet) => {
    const hasHref = Boolean(sheet.href);
    //@ts-expect-error - too hard to Typescriptify
    const hasStylesInDOM = (sheet.ownerNode?.innerText?.length || 0) > 0;
    return sheet.cssRules && !hasHref! && !hasStylesInDOM;
  });

  const CSSOMStylesText = CSSOMSheets.map((sheet) =>
    Array.from(sheet.cssRules)
      .map((rule) => rule.cssText)
      .join("")
  ).join("");
  return CSSOMStylesText;
}

export const injectCSSOMStyles = (document: Document) => {
  const styles = getCSSOMStyles();
  if (styles.length === 0) return;

  const styleSheet = document.createElement("style");
  // TODO: Why is this deprecated?
  styleSheet.type = "text/css";
  const stylesText = document.createTextNode(getCSSOMStyles());
  styleSheet.appendChild(stylesText);
  document.head.appendChild(styleSheet);
};

export const serializeCSSInJSStyles = injectCSSOMStyles;