Aral Balkan
2 months ago

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 #SlottyMcSlotFace #slots #SmallWeb #web #dev

Screenshot of screen split into quarters. On the left, two terminal windows with code, on the right, two browser windows with an illustration of a monkey-like creature with a tuft of blonde hair at the top (“normal”) and the same creature wearing a hat, glasses and false moustache in the bottom one (“disguised”).

Code excerpt, top:

export default ({ slot }) => html`
  <if ${slot.head !== undefined}>
      <img src='/images/head.png' alt='Head'>

  <if ${slot.eyes !== undefined}>
      <img src='/images/eyes.png' alt='Eyes'>

  <if ${slot.mouth !== undefined}>

Code excerpt, bottom:

import Slotty from './Slotty.component.js'
import Navigation from './Navigation.component.js'

export default _ => html`
    <content for='head'>
      <img src='/images/disguised/head.png' alt='Head with hat.'>
    <content for='eyes'>
      <img src='/images/disguised/eyes.png' alt='Eyes with glasses.'>
    <content for='mouth'>
      <img src='/images/disguised/mouth.png' alt='Mouth with moustache.'>
  <${Navigation} currentPage='Disguised' />