geist-ui <Cssbaseline /> will auto insert into body , how can i insert it to shadow root

[meowWhat]

Feature request 🚀

• I will create Pull Request
• It's just a suggestion

Expected

• i use geist-ui in chrome extension , it will influence other web style , i must insert it to shadow root
• may be have a props can assign a shaw dow root like in feature

Examples

Programme (Optional)

Others (Optional)

[meowWhat]

I have currently hacked the style insertion logic of styleJSX. However, I have not yet found a way to pass the shadow root to styleJSX. It seems to determine the insertion location by analyzing the contents of the <style jsx> tag. For those who require it, this method can be utilized by using patch-package to directly modify the node_modules and temporarily resolve this issue.

in style-jsx.es.js

diff --git a/node_modules/@geist-ui/core/esm/styled-jsx.es.js b/node_modules/@geist-ui/core/esm/styled-jsx.es.js
index 1d5deb5..d695e6d 100644
--- a/node_modules/@geist-ui/core/esm/styled-jsx.es.js
+++ b/node_modules/@geist-ui/core/esm/styled-jsx.es.js
@@ -315,7 +315,7 @@ var stylesheet = {}
         tag.appendChild(document.createTextNode(cssString))
       }
 
-      var head = document.head || document.getElementsByTagName('head')[0]
+      var head = window['your-head-id'] || document.head || document.getElementsByTagName('head')[0]
 
       if (relativeToTag) {
         head.insertBefore(tag, relativeToTag)

create shaw dow root

public createShadowRoot(root: Element) {
    let shadowRoot: ShadowRoot
    if (root.attachShadow) {
      shadowRoot = root.attachShadow({ mode: 'open' })
    } else {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      shadowRoot = (root as any).createShadowRoot()
    }

    const head = document.createElement('head')
    // geist styled jsx will insert style it to this head
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    ;(window as any)['your-head-id'] = head

    shadowRoot.appendChild(head)
    return shadowRoot
  }