Search code examples
javascriptslotssvelte

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

Solution

  • 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.