Do we have a concept like slot component?

[sawirricardo]

coming from vue, we have v-slot name="xxx"
then in child component, we fill that slot and automatically rendered to that part....

Something like this https://vuejs.org/guide/components/slots.html#named-slots

Do we have this in templ?

[a-h]

Absolutely. It's described in the docs at https://templ.guide/syntax-and-usage/template-composition

[sawirricardo]

but I was thinking something like...

@Layout() {
slot.name('headerInTheLayout')  {
header title
}
slot.name('actionsInTheLayout')  {
<button>Action 1</button>
<button>Action 2</button>
}

<div>The rest of the contents</div>
}

[a-h]

Sorry, I don't understand how that's different to what's described in the docs.

Taking your example, it might look like this...

templ Layout(headerSection, actionsSection templ.Component) {
  @headerSection()
  @actionsSection()
  { children... }
}

You can then use this layout:

templ header() {
  header title
}

templ actions() {
  <button>Action 1</button>
  <button>Action 2</button>
}

templ Page() {
  @Layout(header(), actions()) {
    <div>The rest of the contents</div>
  }
}

[NiclasThobaben]

It does work with other "named" components but not with "inline" or markup (not sure what the right terminology is in this case). This may be useful in some cases, where creating a named component seems unnecessary (or at least a bit annoying).

For example if I want to add some simple markup to the slots, I can't do this:

templ Layout(slotA, slotB templ.Component) {
    <div>
    	@slotA()
    </div>
    <div>
    	@slotB()
    </div>
    { children... }
}

templ Heading() {
    <h1>{ children... }</h1>
}

templ Page() {
    @Layout(
    	<h1>SlotA</h1>,
    	@Heading() { <i>SlotB</i> }
    )
}

using { children... } (which allow markup) would not suffice in this case, because the slots are broken up. Thats one of the features I really liked about Vue, because it keeps the flow of the markup.

So maybe something similar to { children... } like this

templ Layout() {
    <div>
    	{ slot("slotA")... }
    </div>
    <div>
    	{ slot("slotB")... }
    </div>
    { children... }
}

templ Page() {
    @Layout() {
        slot("slotA") {
           <h1>SlotA</h1>
        }
        slot("slotB") {
           <h1>SlotB</h1>
        }
        @Heading() { <i>Children</i> }
        <p>And more children...</p>
    }
}

resulting in

<div>
   <h1>SlotA</h1>
</div>
<div>
   <h1>SlotB</h1>
</div>
<h1><i>Children</i></h1>
<p>And more children...</p>

would actually be quite nice IMO. However, I don't really know the code, so I'm not sure if it is too complex for the usecase. It would at least safe some naming headaches 😄