svelte:element doesn't work as expected with svelte namespaced elements

[jack-weilage]

Describe the bug

Svelte seems to process svelte namespaced elements like svelte:head before svelte:element, causing elements like

<svelte:element this="svelte:head">
  <title>Should be in head</title>
</svelte:element>

to be directly output into the body of the DOM as

<svelte:head>
  <title>Should be in head</title>
</svelte:head>

Reproduction

REPL here to show how elements don't get placed into head or body correctly.

Logs

No response

System Info

System:
    OS: Linux 5.10 Ubuntu 21.10 21.10 (Impish Indri)
    CPU: (8) x64 Intel(R) Core(TM) i5-1035G1 CPU @ 1.00GHz
    Memory: 2.40 GB / 3.68 GB
    Container: Yes
    Shell: 5.1.8 - /bin/bash
Binaries:
    Node: 16.15.0 - ~/.local/share/pnpm/node
    npm: 8.5.5 - ~/.local/share/pnpm/npm
Browsers:
    Edge: Spartan (44.22621.1.0), Chromium (98.0.1108.55)
    Internet Explorer: 11.0.22621.1
npmPackages:
    svelte: ^3.48.0 => 3.48.0

Severity

annoyance

[Conduitry]

<svelte:head> isn't a real element. It's an indicator to the compiler how to treat the elements inside. We don't want to make <svelte:element> responsible at runtime for checking whether the element name is one of the names that has a special meaning to Svelte and include all the necessary code for that just in case.

I'm labeling this "docs" because mentioning this in the docs is the most we'd want to do here. I'm personally -0.5 on mentioning this in the docs, but could be swayed by other maintainers.

[baseballyama]

@jack-weilage

What is the use case of this?
Why just using <svelte:head> is not enough?

This is a personal opinion, but I feel that including this in the documentation would make more noise than information gained.

[jack-weilage]

I was working on a component which had data that could be placed into either the header or body, depending on a prop, kinda like:

<script>
    export let output;
    export let data;
</script>

<#if output === "head">
    <svelte:head>
        <@html data>
        <!-- other html... -->
    </svelte:head>
<:else>
    <div>
        <@html data>
        <!-- other html... -->
    </div>
</if>

and I thought that I could remove the repeated html (a lot longer than this example) with code like

<script>
    export let output;
    export let data;

    $: element = output === "head" ? "svelte:head" : "div"
</script>

<svelte:element this={element}>
    <@html data>
    <!-- other html... -->
</svelte:element>

We could just add a line to the documentation for svelte:element saying

this cannot be a svelte namespaced element.