fix: reevaluate namespace in slots

[paoloricciuti]

Svelte 5 rewrite

Closes #11847

This is the simple fix for the issue but i think there's a more fondamental issue that we either have to fix or list as a breaking from svelte 4. As soon as there's an html element in the component the whole component namespace goes to html.

Svelte 5 repl

Svelte 4 repl

Please note that the Svelte codebase is currently being rewritten for Svelte 5. Changes should target Svelte 5, which lives on the default branch (main).

If your PR concerns Svelte 4 (including updates to svelte.dev.docs), please ensure the base branch is svelte-4 and not main.

Before submitting the PR, please make sure you do the following

• It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
• Prefix your PR title with feat:, fix:, chore:, or docs:.
• This message body should clearly illustrate what problems it solves.
• Ideally, include a test that fails without this PR but passes with it.

Tests and linting

• Run the tests with pnpm test and lint the project with pnpm lint

[changeset-bot]

🦋 Changeset detected

Latest commit: 50ec0bd

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
svelte	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[dummdidumm]

Thank you - you're right, we need to reevaluate our approach.

I think what we need to do is to create separate templates as soon as we detect SVG and HTML is mixed. Will open an issue.

[dummdidumm]

Ok I was about to open an issue but noticed it's kinda unnecessary because mixing HTML and SVG like that is wrong (happy to be proven wrong). Pasting it here:

As soon as there's an html element in the component the whole component namespace goes to html.

Input:

<circle cx={10} cy={10} r={5} />
<button></button>

Output right now:

var root = $.template(`<circle></circle> <button></button>`, 1); // this is a template with the html namespace

Question: Is that correct?

We have several options:

Separate templates

Create separate $.template calls for the HTML and SVG parts so each of those elements has the correct namespace:

var root1 = $.svg_template(`<circle></circle>`, 1);
var root2 = $.template(` <button></button>`, 1);

Then each of those has its correct namespace.

Namespace becomes SVG

The namespace becomes SVG if there's a top level SVG element that is not svg, because it implies this component is used in the context of a SVG namespace

Keep as is / do nothing

Mixing an SVG element that is not svg together with HTML elements is buggy. Either you're inside an svg element, then the button does nothing and is invisible, or you're not, then the circle element is invisible.

My vote is to do nothing, because as pointed out it's invalid anyway.

[paoloricciuti]

Ok I was about to open an issue but noticed it's kinda unnecessary because mixing HTML and SVG like that is wrong (happy to be proven wrong). Pasting it here:

As soon as there's an html element in the component the whole component namespace goes to html.

Input:

<circle cx={10} cy={10} r={5} />
<button></button>

Output right now:

var root = $.template(`<circle></circle> <button></button>`, 1); // this is a template with the html namespace

Question: Is that correct?

We have several options:

Separate templates

Create separate $.template calls for the HTML and SVG parts so each of those elements has the correct namespace:

var root1 = $.svg_template(`<circle></circle>`, 1);
var root2 = $.template(` <button></button>`, 1);

Then each of those has its correct namespace.

Namespace becomes SVG

The namespace becomes SVG if there's a top level SVG element that is not svg, because it implies this component is used in the context of a SVG namespace

Keep as is / do nothing

Mixing an SVG element that is not svg together with HTML elements is buggy. Either you're inside an svg element, then the button does nothing and is invisible, or you're not, then the circle element is invisible.

My vote is to do nothing, because as pointed out it's invalid anyway.

I agree that it should be invalid...if you look at the svelte 4 repl the button is nowhere to be seen so there's still a "bug"...i was just pointing out that the behaviour is different from svelte 4 so it should be listed as a breaking.

[paoloricciuti]

That said html behaviour seems to be like svelte 4.

https://codepen.io/paoloricciuti/pen/oNRZNer?editors=1010