fix: improve resiliency of iframe CSS for some frameworks, like Mantine

packages/core/components/AutoFrame/index.tsx

@@ -7,7 +7,7 @@ const styleSelector = 'style, link[rel="stylesheet"]';
 const collectStyles = (doc: Document) => {
   const collected: HTMLElement[] = [];
 
-  doc.head.querySelectorAll(styleSelector).forEach((style) => {
+  doc.querySelectorAll(styleSelector).forEach((style) => {
     collected.push(style as HTMLElement);
   });
 
@@ -37,6 +37,16 @@ const getStyles = (styleSheet?: CSSStyleSheet) => {
   return "";
 };
 
+// Sync attributes from parent window to iFrame
+const syncAttributes = (sourceElement: Element, targetElement: Element) => {
+  const attributes = sourceElement.attributes;
+  if (attributes?.length > 0) {
+    Array.from(attributes).forEach((attribute: Attr) => {
+      targetElement.setAttribute(attribute.name, attribute.value);
+    });
+  }
+};
+
 const defer = (fn: () => void) => setTimeout(fn, 0);
 
 const CopyHostStyles = ({
@@ -205,6 +215,14 @@ const CopyHostStyles = ({
     const hrefs: string[] = [];
     let stylesLoaded = 0;
 
+    // Sync attributes for the HTML tag
+    const parentHtml = parentDocument.getElementsByTagName("html")[0];
+    syncAttributes(parentHtml, doc.documentElement);
+
+    // Sync attributes for the Body tag
+    const parentBody = parentDocument.getElementsByTagName("body")[0];
+    syncAttributes(parentBody, doc.body);
+
     Promise.all(
       collectedStyles.map(async (styleNode, i) => {
         if (styleNode.nodeName === "LINK") {