CODEWITHSUNDEEP
javascriptslotssvelte
Elco Brouwer von Gonzenbach
Elco Brouwer von Gonzenbach

Reputation: 63

How to access named slots inside svelte component?

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

Upvotes: 2

Views: 1550

Answers (1)

Rich Harris
Rich Harris

Reputation: 29585

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.

Upvotes: 1

Related Questions