From 1f4d8d2b26815e836cda6ca16e8920fdabd7d069 Mon Sep 17 00:00:00 2001
From: QuentinHsu <xuquentinyang@gmail.com>
Date: Thu, 2 Jul 2026 21:35:27 +0800
Subject: [PATCH] fix(web): inject app styles into isolated HTML (#5860)

- clone loaded application style nodes into the Shadow DOM for custom HTML rendering.
- keep HTML rendering isolated while restoring layout and typography that depend on app CSS.
---
 web/default/src/components/html-content.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/web/default/src/components/html-content.tsx b/web/default/src/components/html-content.tsx
index 1332d72f..e31bf820 100644
--- a/web/default/src/components/html-content.tsx
+++ b/web/default/src/components/html-content.tsx
@@ -142,11 +142,24 @@ function IsolatedHtmlContent(props: {
 
   useEffect(() => {
     const container = containerRef.current
-    if (!container) return
+    if (!container) {
+      return
+    }
 
     const shadowRoot =
       container.shadowRoot ?? container.attachShadow({ mode: 'open' })
-    shadowRoot.innerHTML = `${isolatedContentBaseStyles}${props.html}`
+    const applicationStyleNodes = [
+      ...document.head.querySelectorAll<HTMLLinkElement | HTMLStyleElement>(
+        'style, link[rel="stylesheet"]'
+      ),
+    ].map((node) => node.cloneNode(true))
+    const contentTemplate = document.createElement('template')
+    contentTemplate.innerHTML = `${isolatedContentBaseStyles}${props.html}`
+
+    shadowRoot.replaceChildren(
+      ...applicationStyleNodes,
+      contentTemplate.content
+    )
   }, [props.html])
 
   return (