如何获取页面完整CSS样式，解决iframe srcdoc样式渲染问题？

我想构建类似TailwindUI的组件库，但在通过srcdoc=给iframe传入HTML内容时遇到了样式问题。目前用CDN链接引入样式可以解决，但每次渲染新iframe都会重新请求CDN，这不是最优方案。

我试过获取页面所有CSS类及其样式规则，把它们放到<style></style>里注入iframe，但渲染效果很差。我该怎么解决？

HTML标记 #

<div class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">
  <div class="fixed inset-0 bg-gray-200 opacity-75"></div>
  <div class="fixed inset-0 z-10 overflow-y-auto">
    <div class="flex items-center justify-center h-full w-full">
      <div class="bg-white p-5 px-10 rounded-[1rem] max-w-xs">
        <div class="text-center">
          <h5 class="font-bold text-xl my-2 text-gray-700">
            Exit
          </h5>
          <p class="text-sm font-normal text-gray-500">
            Click the "confirm" button to close the window without saving
          </p>
        </div>
        <div class="grid grid-cols-2 gap-2 text-center mt-3">
          <div class="col-span-1">
            <button class="w-full p-2 bg-gray-100 font-bold text-sm rounded-md text-gray-400">Cancel</button>
          </div>
          <div class="col-span-1">
            <button class="w-full p-2 bg-blue-600 font-bold text-sm rounded-md text-gray-100">Confirm</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

JS方法 #

获取单个CSS类的样式规则 #

function getStyle(className) {
    var cssText = "";
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var x = 0; x < classes.length; x++) {        
        if (classes[x].selectorText == className) {
            cssText += classes[x].cssText || classes[x].style.cssText;
        }         
    }
    return cssText;
}

获取页面所有使用的类 #

[].concat(...[...document.querySelectorAll('*')].map(e=>[...e.classList])).filter((d,i,a)=>a.indexOf(d)==i).sort().map(i=> getStyle('.'+i)).join(' ');

当前效果 #

我的操作 #

最终效果 #

我觉得需要获取更多标签相关的样式，但这还不够，我的JS代码需要优化。

内容的提问来源于stack exchange，提问作者SpaceMonkey