35 Matching Annotations
- Mar 2021
-
www.jackfranklin.co.uk www.jackfranklin.co.uk
-
My preference here is biased by the fact that I spend everyday at work building web components, so Svelte's approach feels very familiar to slots in web components.
first sighting: That <template>/<slot> is part of HTML standard and the reason Svelte uses similar/same syntax is probably because it was trying to make it match / based on that syntax (as they did with other areas of the syntax, some of it even JS/JSX-like, but more leaning towards HTML-like) so that it's familiar and consistent across platforms.
-
I like this approach more because I can scan the code that renders the Box component and easily spot that it takes two children. If the Box took any props, they'd be within the opening <Box> tag, and they would be distinct from any children props.
-
- Jan 2021
-
-
Maybe $$slots like $$props? My use case is that I'd like to wrap a slot's content in an element that applies styling that I'd like absent without the slotted content. Something like this: {#if $$slots.description} <div class="description"> <slot name="description"></slot> </div> {/if}
-
-
github.com github.com
-
allow <slot> to be part of a slot
-
But it doesn't work so I have to wrap slots in useless and interfering divs or spans like this: <Button fz="16" h="64" {...$$props}> <span slot="prepend"><slot name="prepend" /></span> <slot /> <span slot="append"><slot name="append" /></span> </Button>
It really doesn't work? I thought, from @tanhauhau's example, that it would, right?
-
I want to make some add-ons or wrappers on components e.g BigButton.svelte <script> import Button from './Button.svelte' </script> <Button fz="16" h="64" {...$$props}> <slot slot="prepend" name="prepend" /> <slot /> <slot slot="append" name="append" /> </Button>
-
Related to #1824, can do <svelte:component this={Bar}> <slot></slot> <slot name="header" slot="header"></slot> </svelte:component> <script> import Bar from './Bar.svelte'; </script> as a forwarding workaround
-
-
-
Interesting . That feature (<slot slot="..."/>) was only recently added in #4295. It wasn't primarily intended to be used that way, but I guess it's a good workaround for this issue. I'm yet to find caveats to slotting components that way, other than it's inconvenient, as opposed to <Component slot="..."/>.
-
I'm not sure I understand the point of what you're trying to do. Components inherently have no root node so there isn't just one "node slotted" that you could possibly reference. <slot slot=""> doesn't create a wrapper around your component in the DOM. It just injects your component as Svelte usually would.
-
If components gain the slot attribute, then it would be possible to implement the proposed behavior of <svelte:fragment /> by creating a component that has a default slot with out any wrappers. However, I think it's still a good idea to add <svelte:fragment /> so everyone who encounters this common use case doesn't have to come up with their own slightly different solutions.
-
Another possible syntax is {#slot bar}<Foo/>{/slot}, which would also allow a bunch of DOM nodes and components inside the slot, without them needing to be from a single component
-
-
svelte.dev svelte.dev
-
-
Since this is a recursive component I can imagine it being tricky to oversee all the slots and props passing.
Tags
Annotators
URL
-
-
-
I am trying to implements this usecase (a generic lazy loader component which forwards slots/events to the "real" component).
-
-
github.com github.com
-
In 3.29.0 you can now use <slot slot='...'> to forward slots into a child component, without adding DOM elements.
-
Would love to see passthrough slots to create superset components, for example Table and TableWithPagination (table slots for TableWithPagination could be passed through to Table).
-
-
svelte.dev svelte.dev
-
www.digitalocean.com www.digitalocean.com
-
It’s something that we’re already used to do naturally with HTML elements. Let’s demonstrate how using the <slot> component works by building a simple Card component
-
-
linguinecode.com linguinecode.com
-
But that method has its limitations. The <slot> directive cannot be dynamic.
-
- Dec 2020
-
github.com github.com
-
I agree with your first point about the presumed complexity of slots.
Tags
Annotators
URL
-
-
github.com github.com
-
Fixes #1037 allow slotted components via making <Component> <Inner slot="foo" /> </Component> as a sugar syntax for <Component> <svelte:fragment slot="foo"> <Inner /> </svelte:fragment> </Component>
-
-
-
github.com github.com
-
Oof. Slots are complicated
-
-
-
Now that I got a clearer picture, I still don't understand why that error message (cannot bind to variable declared with let:) is there, in the sense that for me it would make a lot of sense to both bind (which connects bidirectionally the App#item variable with the Component#item variable) and also let (which connects the slot#item variable with the Component#item variable, allowing data to flow from slot to Component, and thus to the top-level App via the bind syntax.
-
-
-
-
Slot element doesn't support bind:this, but it's fallback child does.
-
- Nov 2020
-
imfeld.dev imfeld.dev
-
Svelte slots are much easier to use and reason about than Angular transclude, especially in cases where you don't want an extra wrapper element around the slot content.
-
- Sep 2020
-
-
<slot ref:img data-visible="{{visible}}" /> In the above everything on <slot> is lost since slot is a space in the HTML, not an actual element. How could we translate this to zero or ten elements inside the slot?
But I think this is a solved problem with current Svelte: just pass the lets to the slot content, and the slot content can decide how to pass those let props on to any or all of its child elements as it sees fit...
-
-
github.com github.com
-
Often, allowing the parents to compose elements to be passed into components can offer the flexibility needed to solve this problem. If a component wants to have direct control over every aspect of a component, then it should probably own the markup as well, not just the styles. Svelte's slot API makes this possible. You can still get the benefits of abstracting certain logic, markup, and styles into a component, but, the parent can take responsibility for some of that markup, including the styling, and pass it through. This is possible today.
-
-
svelte.dev svelte.dev
-
In this app, we have a <Hoverable> component that tracks whether the mouse is currently over it. It needs to pass that data back to the parent component, so that we can update the slotted contents. For this, we use slot props.
Tags
Annotators
URL
-