Conversation

Notices

1. Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 28-Mar-2023 00:22:53 JST Aral Balkan

   Kitten has slots but what about named slots?

   Yep, Kitten has those too (as of a few minutes ago in main) :kitten:🎉

   https://codeberg.org/kitten/app

   #Kitten #SmallWeb #templating #layout #web #dev

   • Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 28-Mar-2023 00:25:04 JST Aral Balkan

     in reply to

     • Andrew Chou

     CC @andrew_chou ­– I guess I must’ve been mulling it over in the back of my head since we last spoke since it just came to me that we can have named slots and implement them quite elegantly too (if I do say so myself) ;P

     (As always, would love your thoughts.)

   • Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 28-Mar-2023 00:28:08 JST Aral Balkan

     in reply to

     Oh, hee hee, I jumped the gun a bit. It’s *now* in main (and I just updated the distribution build too so if you install/update Kitten you should now be able to play with it).

     Going to document it next :)

   • Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 28-Mar-2023 00:33:24 JST Aral Balkan

     in reply to

     So, basically, say you have a component called SlottyMcSlotFace, in your page you’d do:

     ```js
     import Slotty from './SlottyMcSlotFace.component.js'

     export default function _ => html`
     <${Slotty}>
     <content for='face'>
     <img src='/eyes.png' alt='eyes'>
     </content>
     </>
     `
     ```

     And in SlottyMcSlotFace:

     ```js
     export default ({ slot }) => html`
     <div>
     ${slot.face}
     <img src='/nose.png' alt='node'>
     <img src='/mouth.png' alt='mouth>
     …
     </div>
     `
     ```

   • Andrew Chou (andrew_chou@toot.cafe)'s status on Tuesday, 28-Mar-2023 00:38:44 JST Andrew Chou

     in reply to

     @aral nice! this is what I would've expected to be able to do given a prop that's called slot

   • Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 28-Mar-2023 00:38:44 JST Aral Balkan

     in reply to

     • Andrew Chou

     @andrew_chou 🤓👍

   • Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 28-Mar-2023 01:52:19 JST Aral Balkan

     in reply to

     • Niels Abildgaard

     @nielsa Thanks :)

   • Niels Abildgaard (nielsa@mas.to)'s status on Tuesday, 28-Mar-2023 01:52:20 JST Niels Abildgaard

     in reply to

     @aral nice!

   • Aral Balkan (aral@mastodon.ar.al)'s status on Tuesday, 28-Mar-2023 04:09:12 JST Aral Balkan

     in reply to

     I might actually have created the Slotty McSlotFace example… (I’m not sure if this calls for an intervention or not but I know I’m having fun.)

     :kitten:💕

     https://codeberg.org/kitten/app/src/branch/main/examples/slotty-mcslotface

     #Kitten #SlottyMcSlotFace #slots #SmallWeb #web #dev