Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Proposal: dynamic elements `<svelte:element>` #2324

Open
arxpoetica opened this issue Mar 27, 2019 · 11 comments

Comments

@arxpoetica
Copy link
Contributor

commented Mar 27, 2019

Just recording this as a requested feature, since it comes up from time to time. Not actually saying we should do it, but would be good to track the discussion.

Proposal for <svelte:element>

<script>
  export let type = 'div';
</script>

<svelte:element this={type}>
  <slot></slot>
</svelte:element>

What are the actual use cases? Are there any drawbacks?

@arxpoetica

This comment has been minimized.

Copy link
Contributor Author

commented Mar 27, 2019

@abastardi

This comment has been minimized.

Copy link

commented Apr 22, 2019

And is it all just syntactic sugar for what's already possible? https://v3.svelte.technology/repl?version=3.0.0-beta.21&gist=42290cfe8bae4dee4df232669d12dc29

That example doesn't allow for any arbitrary tag to be specified, and it would get unwieldy to support more than 2 or 3 options.

@TehShrike

This comment has been minimized.

Copy link
Member

commented Apr 22, 2019

@eliranhe

This comment has been minimized.

Copy link

commented May 2, 2019

+1!
Although there’s a workaround, I feel it reduces a lot of boilerplate code

@mindrones

This comment has been minimized.

Copy link
Member

commented May 2, 2019

I just needed to do this, but I'd go probably a bit more extreme:

{#each section as {depth, title, lines}}
<h{depth}>{title}</h{depth}>
  {#each lines as line}
  <p>{content}</p>
  {/each}
{/each}

To differentiate between self closing tags and tags accepting content one could do:

{#each section as {tag, is_self_closing, props, content}}
{#if is_self_closing}
<{tag} {...props} />
{:else}
<{tag} {...props}>{content}</{tag}>
{/if}
@loilo

This comment has been minimized.

Copy link

commented Jul 31, 2019

+1

Use case: Wrapper components that need to render an element (e.g. because they attach event listeners). You'd probably use a <div> there by default but there may be places where this is not desirable for semantic reasons (e.g. in lists).

@Conduitry Conduitry added the proposal label Aug 4, 2019

@Conduitry

This comment has been minimized.

Copy link
Member

commented Aug 4, 2019

Copying my recent comment from chat here for posterity and so that I can link to it later:

There are a few technical issues that would need to be ironed out first, mostly related to figuring out how we'll avoid doing a bunch of stuff at runtime. If this is implemented, it would probably come with some caveats. Certain tag types have to be treated as special cases when setting certain attributes on them, and we won't be able to do these checks at compile time, but we don't want to include all that logic in the compiled component

@arxpoetica

This comment has been minimized.

Copy link
Contributor Author

commented Aug 8, 2019

don't want to include all that logic in the compiled component

Amen to that. I think we could even broadly caveat that by saying “do whatever element you want” but don't expect Svelte to care about following any HTML spec, etc.

@slominskir

This comment has been minimized.

Copy link

commented Aug 8, 2019

Just to clarify, this enhancement is about using a String to dynamically create a component, correct?

We can already use svelte:component tag to create components on-demand from a constructor. To do this from a String instead I just create an object containing a key for each component with the value being the constructor:

const components = {};
components['Label'] = Label;
components['Tree'] = Tree;
components['Menu'] = Menu;

Then you can create dynamically based on String later:

let name = 'Tree';
<svelte:component this="{components[name]}"/>
@Conduitry

This comment has been minimized.

Copy link
Member

commented Aug 8, 2019

No, this is about using a string to create an element of that tag name.

@slominskir

This comment has been minimized.

Copy link

commented Aug 8, 2019

OK, for any element, even those that aren't svelte components. Got it.

So a "Svelte" way to do document.createElement.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
8 participants
You can’t perform that action at this time.