From 1f863546172c9d4a4d14c1fe0874556ff56eda26 Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive.local>
Date: Fri, 31 Jul 2026 21:35:53 +0200
Subject: [PATCH] review(#2873): use a plain <style> element instead of
 adoptedStyleSheets
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

mara: 'i dont like js css attacher. is there a cleaner way?' — yes: each
component instance was already building its own fresh CSSStyleSheet()
per connect, no sharing across instances, so adoptedStyleSheets bought
nothing here over a plain <style> tag. Same raw-text CSS import, just a
simpler attach step.
---
 frontend/packages/shared/src/shadow-css.js | 24 ++++++++++++++--------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/frontend/packages/shared/src/shadow-css.js b/frontend/packages/shared/src/shadow-css.js
index 7c49e710..1ad9268f 100644
--- a/frontend/packages/shared/src/shadow-css.js
+++ b/frontend/packages/shared/src/shadow-css.js
@@ -1,15 +1,21 @@
 // attachShadowCss(host, cssText, shadowInit) — attach an open shadow root
-// to `host`, adopt `cssText` as a constructed stylesheet, and return the
+// to `host`, append `cssText` as a plain `<style>` element, and return the
 // root. Shared by every shadow-DOM custom element (hive-dialog, hive-toast,
-// hive-btn) so the CSSStyleSheet-adoption boilerplate lives in one place
-// instead of being copy-pasted per component. `shadowInit` extends the
-// `attachShadow()` options past `mode: 'open'` — e.g. `hive-btn` passes
-// `{ delegatesFocus: true }` so `.focus()` on the host reaches the inner
-// `<button>`.
+// hive-btn) so the boilerplate lives in one place instead of being
+// copy-pasted per component.
+//
+// A `<style>` element rather than a constructed `CSSStyleSheet` +
+// `adoptedStyleSheets` — mara's call on review, and the right one: each
+// component instance was already building its own fresh `CSSStyleSheet()`
+// per connect (no sharing across instances), so `adoptedStyleSheets` bought
+// nothing here over the plain, universally-understood `<style>` tag. Reach
+// for `adoptedStyleSheets` again only if a future component actually shares
+// one parsed stylesheet object across many instances — that's the case it
+// exists for.
 export function attachShadowCss(host, cssText, shadowInit = {}) {
   const root = host.attachShadow({ mode: 'open', ...shadowInit });
-  const sheet = new CSSStyleSheet();
-  sheet.replaceSync(cssText);
-  root.adoptedStyleSheets = [sheet];
+  const style = document.createElement('style');
+  style.textContent = cssText;
+  root.append(style);
   return root;
 }