chrome升级到v112后svg下的一些样式不加载了

chrome从 v108升级到v112.0.5615.49后
foreignObject 下的后代样式(比如 foreignObject div{color:red;})不生效,但后代样式带了伪元素就会生效（比如foreignObject button:hover{color:red}）
怎么办呢？
如图，右侧样式表中只有foreignObject{}的样式没有foreignObject div{},但代码里有

怎么让他加载啊，请教

oreignObject div {}不会生效 ，但是 .foreignObjectDiv div{}会生效。
用js给foreignObject 元素添加css 名为 . .foreignObjectDiv 就行了。

这可能是由于Chrome从版本108开始，禁用了foreignObject元素的CSS样式优化。在更新到112.0.5615.49后，这个限制得到了进一步的加强。
要解决这个问题，您可以尝试使用以下方法之一：
1.在外部SVG文件中定义样式，然后将其嵌入到HTML文档中。这将使样式可以应用于foreignObject元素。
2.对于需要在foreignObject元素中应用样式的元素，请将其嵌套在一个SVG元素中，并使用SVG样式来定义该元素的样式。
例如：

<svg>
  <foreignObject>
    <svg>
      <g>
        <rect width="100" height="100" style="fill:red;" />
        <text x="50" y="50" style="font-size:20px; fill:white;">Hello</text>
      </g>
    </svg>
  </foreignObject>
</svg>

3.对于需要在foreignObject元素中应用样式的元素，可以尝试在样式中添加!important关键字，以覆盖默认样式。
例如：

foreignObject div {
  color: red !important;
}

注意：使用!important关键字可能会导致样式不可预测，并且不应滥用。只有在没有其他解决方案时才使用它。