获取元素和嵌套子项的 computedStyles，并附加到 Web 组件内的 <style> 标记

问：

我尝试在 foreignobject 和 svg 中渲染 HTML，如下所示：

<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
    <style>CSS GOES HERE</style>
    <foreignObject width="100%" height="100%">
    ..mycode
    </foreignObject>
    </svg>

现在，渲染 HTML 很容易，但提取元素 CSS 并将其放在标签中更棘手。<style>

我的元素看起来像这样（实际上它有更多的嵌套元素 - 包括“简单”元素和具有开放 shadowroot 的自定义 Web 组件）：

 <div id="myEl">
    <myChildComponent class="Comp1"></myChildComponent>
</div>

CSS格式：

:host([myVariable='green']) .Comp1 {
      background-color: var(--dark-green);
   }
    
 :host([myVariable='red']) .Comp1 {
      background-color: var(--dark-red);
    }
  #myEl {
     color: var(--green)
    }

请注意，我正在使用注入的 CSS var 和 host，因此可能不得不求助于 getComputedStyle。

我试过：

 let myVar = this.shadowRoot.querySelector('#myEl')
    let css = window.getComputedStyle(myVar, '')

但是，above/css 变量不会返回任何可以附加到标记的拟合 css 或类属性。如何提取容器 div 及其子级的所有计算 CSS，并将其转换为可以轻松附加到标签的格式？<style><style>