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

Question

我试图创建一个使用SVG并包含一些HTML的StencilJS组件，但每次加载该组件时，都会出现错误：“ TypeError：设置仅吸气剂属性“ 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生成的基本组件