typescript - 如何在 stenciljs 中设置 foreignObject 的宽度和高度？

Question

我正在尝试创建一个使用 SVG 并包含一些 HTML 的 StencilJS 组件，但每当我加载组件时，我都会收到错误消息：'TypeError: setting getter-only property "height"'。

我已经单独测试了 HTML 并且它显示正确，我将 foreignObject 的宽度和高度设置为 100% 以填充 svg，但在 StencilJS 组件中设置它会导致错误。我还检查了mdn并且属性似乎不是只读的。

这是我正在使用的代码：

import { Component, h } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {

  render() {
    return (
    <svg>
      <foreignObject width='100%' height='100%'>
        <div>SOME TEXT</div>
      </foreignObject>
    </svg>
    );
  }
}

它只是从 stencilJS init cli 生成的基本组件