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}> <then> ${slot.head} <else> <img src='/images/head.png' alt='Head'> </if> <if ${slot.eyes !== undefined}> <then> ${slot.eyes} <else> <img src='/images/eyes.png' alt='Eyes'> </if> <if ${slot.mouth !== undefined}> <then> ${slot.mouth} <else> Code excerpt, bottom: import Slotty from './Slotty.component.js' import Navigation from './Navigation.component.js' export default _ => html` <${Slotty}> <content for='head'> <img src='/images/disguised/head.png' alt='Head with hat.'> </content> <content for='eyes'> <img src='/images/disguised/eyes.png' alt='Eyes with glasses.'> </content> <content for='mouth'> <img src='/images/disguised/mouth.png' alt='Mouth with moustache.'> </content> </> <${Navigation} currentPage='Disguised' /> `
https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/110/096/803/727/001/009/original/e41d79300f9c4a30.png