How to access named slots inside svelte component?

Question

I'm trying out Svelte (great!) but I'm running into a problem that I don't know how to solve. I have a component with a couple of named slots. Based on whether these slots are filled, I need to render some additional HTML. So my idea was to put these blocks inside an {{#if slots}} block, but I don't know how to refer to the named slots. Trying this.options.slots in oncreate, I can see the collection of slots, but I don't know how to get to them in the HTML part of my component. Anyone able to help me out? See this REPL

Uhmmm, this.set() should do the trick. Silly me... – Elco Brouwer von Gonzenbach Dec 19 '17 at 09:31 — Elco Brouwer von Gonzenbach, Dec 19 '17 at 09:31

score 1 · Accepted Answer · answered Dec 19 '17 at 17:44

1

Elco already figured out the answer and mentioned it in a comment, but for anyone else who comes across this — it's a little hacky, but you can do this.set(...) in the oncreate hook:

oncreate () {
  this.set({
    hasEmail: !!this.options.slots.email
  });
}

Demo here.

answered Dec 19 '17 at 17:44

Rich Harris

28,091
3
84
99

Thanks Rich (and a big thank you for you terrific work on svelte and sapper), I have another issue with these named slots: I'd like to place custom components like this `Title here` but that doesn't work. I have to do `Title here` which is not very elegant of course. Is there a way around this? – Elco Brouwer von Gonzenbach Dec 20 '17 at 00:24
Not currently. Slotted components is something we could conceivably support in future, but unfortunately only slotted elements are supported for now. – Rich Harris Dec 20 '17 at 13:45
By all means please do! – Rich Harris Dec 21 '17 at 13:23

How to access named slots inside svelte component?

1 Answers1