Skip to content

Render content if this of a svelte:element is null just without a svelte:element #15666

@Vulcagon

Description

@Vulcagon

Describe the problem

If this is a nullish value on a <svelte:element> element, the element and the content isn't rendered.

Describe the proposed solution

I think it would be better to still render the content if this is a nullish value just without the element wrapping the content. If you want to conditionally render something you can already do {#if condition}<wrapper-element>content</wrapper-element>{/if}. If <svelte:element> would still render its content with a nullish this value you could easily conditionally wrap content in an html element using <svelte:element this={condition ? 'wrapper-element' : null}>content</svelte:element>

I know you can already render content conditionally using snippets, but I still think it would be a nice feature.

TLDR: I want to change the behavior of the following code

<svelte:element this={condition ? 'wrapper-element' : null}>
    content
</svelte:element>

Current behavior is the same as

{#if condition}
    <wrapper-element>
        content
    </wrapper-element>
{/if}

I want to change this behavior to

{#snippet content()}
    content
{/snippet}

{#if condition}
    <wrapper-element>
        {@render content()}
    </wrapper-element>
{:else}
    {@render content()}
{/if}

Importance

nice to have

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions