Unable to use foreignObject inside SVG

[adrm]

Stencil version:

 @stencil/core@1.1.4

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

When trying to model an svg element with JSX inside a Stencil component, the svg rendering breaks from the point that a foreignObject appears. If I add a div with innerHTML set to a string with the same svg used before, thus avoiding JSX, it works as expected.

I have this JSX in my component:

<Host>
          <p>If injected with innerHTML it works.</p>
          <div
            innerHTML={`
          <svg width="100%" height="500">
          <rect x="10" y="10" width="100" height="150" fill="blue" />
          <foreignObject x="10" y="10" width="100" height="150">
            <div>
              Here is a <strong>paragraph</strong> that requires
              <em>word wrap</em>
            </div>
          </foreignObject>

          <circle cx="200" cy="200" r="100" fill="red" />
          <foreignObject x="120" y="120" width="180" height="180">
            <div>
              <ul>
                <li>
                  <strong>First</strong> item
                </li>

                <li>
                  <em>Second</em> item
                </li>
                <li>Thrid item</li>
              </ul>
            </div>
          </foreignObject>
        </svg>
          `}
          />

          <p>If plain JSX is used, with the same code, it doesn't.</p>
          <svg width="100%" height="500">
            <rect x="10" y="10" width="100" height="150" fill="blue" />
            <foreignObject x="10" y="10" width="100" height="150">
              <div>
                Here is a <strong>paragraph</strong> that requires
                <em>word wrap</em>
              </div>
            </foreignObject>

            <circle cx="200" cy="200" r="100" fill="red" />
            <foreignObject x="120" y="120" width="180" height="180">
              <div>
                <ul>
                  <li>
                    <strong>First</strong> item
                  </li>

                  <li>
                    <em>Second</em> item
                  </li>
                  <li>Thrid item</li>
                </ul>
              </div>
            </foreignObject>
          </svg>
        </Host>

And this is what I get rendered:

The svg example is from https://jsfiddle.net/leaverou/qwg3r/, btw.

Expected behavior:

SVG should render fine, the same as using pure HTML.

Steps to reproduce:

Create a stencil component with the code provided before as the return value for the render function and run it in a browser.

Other information:

[briandiehr]

Hi! I see this was marked as fix within the changelog, but when I test with the latest version, 1.7.0, the inner text does not render.