跨<use>元素Shadow DOM边界的CSS选择器兼容性问题及解决方案问询

我最近碰到一个CSS兼容性的小坑，想跟大家请教下解决方案，先看我的测试代码：

<style>
body:has(:checked) .my-text { fill: blue; }
</style>
<input type="checkbox" checked>
<svg>
  <defs>
    <g id="my-g">
      <text y="20" class="my-text">This is blue in Chrome, black in Firefox</text>
      <text y="40">This is black</text>
    </g>
  </defs>
  <use href="#my-g" y="45"></use>
</svg>

这段代码在Chrome里能让.my-text类的文本变成蓝色，但在Firefox里它还是黑色的。我猜原因应该是Firefox会把<use>引用的元素放到#shadow-root里面，导致CSS里的后代选择器没法把它们识别成body:has(:checked)的后代元素。

我现在有几个疑问想请教大家：

• 有没有办法在不使用JS也不使用CSS变量（比如像:checked { --text-color: blue; }这种写法）的前提下，让这段代码在Firefox里也正常生效？
• 有没有CSS组合器能打通DOM（也就是:has(:checked)所在的上下文）和Shadow DOM之间的边界？
• 另外我也很好奇，Chrome和Firefox这两种行为，到底哪一个是符合CSS规范的？

内容来源于stack exchange