add slots option to component constructor options object

[tanhauhau]

rebased #2684

fixes #2588

[Conduitry]

I'm assuming this doesn't support any sort of interactivity between the component and the slots you pass to it?

I think the main thing I'm worried about here is forcing everyone who uses slots to ship this extra code, whether they want the functionality or not.

[tanhauhau]

So I guess maybe we can add a compile option to turn this on?

[Conduitry]

Maybe. I'd prefer in general not to add compiler options though - and it feels like most of this feature already exists, just as part of the private $$slots prop. Is there any way to re-use more of the existing code when implementing this, or a way to change the private API so that it's more usable?

[TehShrike]

If the extra bytes are only added in the case of components that accept slot content, that seems reasonable to me.

I imagine that the general case by far for a component with <slot> is to pass in slotted content.

[TehShrike]

Requiring a compilation option or special outside code to pass in slot content to the constructor function of a component that has a <slot> feels like the equivalent of requiring a special option/custom code in order to pass in props.

[tanhauhau]

will it be too much if to ask the user to call createSlot({ slotName: slotElements }) before passing in as options.slot?

[wyozi]

How would a user create Svelte components to pass as slots? Since creating such a component requires a target: DOMElement, the component will either need an arbitrary document.createElement("div") wrapper or use some magic to not require target for the slot component. How does Svelte internally do this?

const wrapper = document.createElement("div");
const slot = new SlotComponent({target: wrapper});
const actual = new ActualComponent({target: ..., slots: {default: slot}});

[lukeed]

slightly less runtime 😉

[lukeed]

I think this is missing the ability to mount a Component inside a slot?

new Parent({
  target: document.body,
  props: { ... },
  slots: {
    // Parent has all info to `new Child`
    default: Child
  }
});

[tanhauhau]

Is this how we are going to pass a component into a slot? What would be the props of the component?

[lukeed]

This is what I ended up with, and is working for me already:

new Parent({
  target: document.body,
  props: {
    $$scope: {},
    $$slots: create({
      default: [ Child ],
      // Or
      default: [ new Child({ $$inline: true, props: {...} }) ]
    })
  }
});

This works in current svelte@latest

If this is the approach we want to take, we can work on making it nicer / have pieces hidden. For example, a top-level slots option can implicitly call this create method when passing to props.

[lukeed]

I should also note that my create helper is based off the one in this PR and even with the additional Component support, it's still a small utility

[truongsinh]

FYI I continue this PR at #5687

[akauppi]

@tanhauhau @truongsinh Isn't it weird to have two PRs with the same title, both open?

[timonmasberg]

Will this be merged, it is highly needed for testing 👀

[CcSimple]

Looking forward to this, which is very necessary, especially for developing components.

[B-Esmaili]

Looks like svelte team work on what only matters for themselves. You'd better listen to what community want right? This is second PR that is awaiting merge related to slot. Slot is turning into a nightmare for me. You don't even bother making clear your plan about these PRs. These PRs are 2-3 years old. This is not something to postpone to later time. I wonder how you do component testing without being able to pass slot to theme? Please make clear you roadmap about slots. PLEASE!

[letzfets]

Is there any news on this? The slot option would be highly appreciated for component testing.

[amyipdev]

Bumping due to how amazingly useful this would be

[Rich-Harris]

Closing Svelte 4 PRs as stale — thank you