Automatically passing html attributes to svelte components

Question

Is it not possible to allow svelte components to automatically apply all regular html attributes to the top most element within the component?

Component.html

<div>
  <slot></slot>
</div>

Application.html

<div>
  <Component class="extend">
    Some text
  </Component>
</div>

And have the .extend added to the div inside the Component?

Rehan H · Accepted Answer · 2021-08-25 17:49:55Z

3

<Widget {...$$props}/>
<input {...$$restProps}>

It's possible but not recommended. Straight from the docs: https://svelte.dev/docs

$$props References all props that are passed to a component, including ones that are not declared with export. It is not generally recommended, as it is difficult for Svelte to optimise. But it can be useful in rare cases – for example, when you don't know at compile time what props might be passed to a component.

answered Aug 25, 2021 at 17:49

Rehan H

3143 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrew Smith · Accepted Answer · 2018-03-05 14:21:21Z

2

Because you can have multiple top level items in a component, this would not be possible. However you could do something similar to what I have outlined in this blog post for Ractive. You would have to make sure you are setting only 1 top level item per component though.

https://www.donielsmith.com/blog/2016/06/05/passing-attributes-down-with-ractivejs/

answered Mar 5, 2018 at 14:21

Andrew Smith

1,98611 silver badges12 bronze badges

3 Comments

user2419993 Over a year ago

Thank you for your answer. That could be an okay solution. Would it work with server side rendering, or would the hook only get called on the client, and would find("element") work on the server?

user2419993 Over a year ago

Just saw this github.com/sveltejs/svelte/pull/148 and hooks are not called on the server. So this would not work with serverside rendering. Unless there is some other way of hooking into the creation of the dom node this doesn't seem feasible.

Oli Crt Over a year ago

This would still display an error as prop is not declared tho ?

Collectives™ on Stack Overflow

Automatically passing html attributes to svelte components

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related