<foreignObject> elements do not render when inserted via a <slot>

[nmsmith]

Describe the bug

When a foreignObject (i.e nested HTML) is inserted into a <slot> of an SVG-based component, it will not render correctly. However, if the foreignObject appears directly in the component, it renders as expected.

This bug may have the same underlying cause as this issue, which was closed despite not being fixed.

Reproduction

The issue is reproduced here. I've defined two components which should produce the same HTML. But as it so happens, only the first component renders correctly.

Note: if you remove the outermost <div> in App.svelte, both components render correctly. I have no idea why.

Logs

No response

System Info

System:
    OS: macOS 12.0.1
    CPU: (8) arm64 Apple M1
    Memory: 121.45 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 8.5.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 101.0.4951.64
    Firefox: 98.0.2
    Safari: 15.1
  npmPackages:
    svelte: ^3.44.0 => 3.46.4

Severity

annoyance

[Prinzhorn]

This is very similar to #7450 and #7807

Array.from(document.querySelectorAll('foreignObject')).map(e => e.namespaceURI)

0: "http://www.w3.org/2000/svg"
1: "http://www.w3.org/1999/xhtml" <=============