Svelte may be improperly handling {@html} expressions when used in <style> and <script>

[AlbertMarashi]

Describe the bug

Related to this issue/bug: BuilderIO/builder#2632

The Mitosis library converts the following source file

interface Props {
  styles: string;
  id?: string;
}

export default function InlinedStyles(props: Props) {
  return <style innerHTML={props.styles} id={props.id} />;
}

into the following svelte component

<script context="module"></script>

<script>export let styles;
export let id = undefined;
</script>

<svelte:element this={"sty" + "le"} {id}>{@html styles}</svelte:element>

This issue results in CSS output during SSR to improperly render, injecting <!-- HTML_TAG_START --> and <!-- HTML_TAG_END --> around the CSS code. This causes browsers to fail rendering CSS code leading to a flash of unstyled content

Now, this could be a bug of svelte - perhaps we should not be injecting those comment nodes when rendering inside of a style element

Additional notes
The exact same thing happens with the use of {@html} tags in <script>s

Reproduction

N/A

Logs

No response

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (12) x64 11th Gen Intel(R) Core(TM) i5-11400F @ 2.60GHz
    Memory: 3.48 GB / 15.88 GB
  Binaries:
    Node: 18.17.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 10.0.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (118.0.2088.46)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    svelte: ^4.2.1 => 4.2.1

Severity

annoyance

[AlbertMarashi]

Overall, I'm not sure if this is a svelte bug, an unconsidered issue, or whether this is something the compiler could warn about or explicitly deny. Regardless I believe it's undefined behaviour

[dummdidumm]

I'm tempted to say that we should throw an error at dev time instead, I think you shouldn't use style or script tags with svelte:element. In the case of mitosis it's better to go with the {@html style ... } approach you mentioned in the related issue.

The alternative would be to have a check at runtime to special-case this, not sure it's worth it.

[AlbertMarashi]

@dummdidumm has svelte5 addressed the erroring aspect of this issue? I using svelte:element with script or style tags should be disallowed or throw a runtime error

[dummdidumm]

Revisiting this - I think it's ok to allow style and script for svelte:element. Using {@html ..} is just a bug, because the contents of a script or style tag are not HTML, so this is just using the wrong tag. Therefore closing.