From 3465877f3d665d6011f31a1ab2ef14df507d6c66 Mon Sep 17 00:00:00 2001
From: Mayank <9084735+mayank99@users.noreply.github.com>
Date: Tue, 26 Mar 2024 15:08:51 -0400
Subject: [PATCH] readability

---
 .../itwinui-react/src/core/utils/components/ShadowRoot.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/itwinui-react/src/core/utils/components/ShadowRoot.tsx b/packages/itwinui-react/src/core/utils/components/ShadowRoot.tsx
index dc2b9f1c699..b534ff23ebc 100644
--- a/packages/itwinui-react/src/core/utils/components/ShadowRoot.tsx
+++ b/packages/itwinui-react/src/core/utils/components/ShadowRoot.tsx
@@ -93,8 +93,8 @@ function useShadowRoot(
 
     if (supportsAdoptedStylesheets) {
       // create an empty stylesheet and add it to the shadowRoot
-      const _global = shadow.ownerDocument.defaultView || globalThis;
-      styleSheet.current = new _global.CSSStyleSheet();
+      const currentWindow = shadow.ownerDocument.defaultView || globalThis;
+      styleSheet.current = new currentWindow.CSSStyleSheet();
       shadow.adoptedStyleSheets = [styleSheet.current];
 
       // add the CSS immediately to avoid FOUC (one-time)
@@ -104,13 +104,14 @@ function useShadowRoot(
     }
 
     queueMicrotask(() => {
+      // Flush the state immediately to prevent flash of unslotted light DOM content
       ReactDOM.flushSync(() => setShadowRoot(shadow));
     });
 
     return () => void setShadowRoot(null);
   }, [templateRef, latestCss]);
 
-  // Synchronize the CSS contents of existing stylesheet
+  // Synchronize `css` with contents of the existing stylesheet
   useLayoutEffect(() => {
     if (css && supportsAdoptedStylesheets) {
       styleSheet.current?.replaceSync(css);