Kitten has slots but what about named slots?
Yep, Kitten has those too (as of a few minutes ago in main)
https://codeberg.org/kitten/app
Mastodon is the best way to keep up with what's happening.
Follow anyone across the fediverse and see it all in chronological order. No algorithms, ads, or clickbait in sight.
</markdown>
</div>
</content>
<p>I’m a regular paragraph from the page.</p>
<content for='main'>
<p class='content'>This is content for the main slot.</p>
</content>
Bottom terminal (Slotty.component.js):
export default ({ slot }) => html`
<h1>Named slots</h1>
<header class='slot'>
<h2>Slot: header</h2>
${slot.header}
</header>
${slot.default}
<main class='slot'>
<h2>Slot: main</h2>
${slot.main}
</main>](https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/110/095/892/510/195/042/original/f2b9ff5e228efd39.png "Screenshot of full screen. Two terminal windows on the left show code. On the right is a browser showing the rendered Named slots example.
Browser contents:
Heading: Named slots
Pink boxed section with white on pink heading titled “Slot: header”. Inside it a blue dashed border inside of which there’s a heading: “This is content for the header slot” followed by an illustation of a cat with a caption that reads “Isn’t Kitten cute?”
Under the box is a heading and two paragraphs that are regular DOM nodes from the page.
Under that are two more slots, main and footer.
Top terminal (index.page.js):
import Slotty from './Slotty.component.js'
export default _ => html`
<${Slotty}>
<h2>I’m a regular heading from the page.</h2>
<content for='header'>
<div class='content'>
<markdown>
### This is content for the header slot.
![Illustration of a sitting kitten.](/😸/images/kitten-sitting.svg \"Isn’t Kitten cute?\")
</markdown>
</div>
</content>
<p>I’m a regular paragraph from the page.</p>
<content for='main'>
<p class='content'>This is content for the main slot.</p>
</content>
Bottom terminal (Slotty.component.js):
export default ({ slot }) => html`
<h1>Named slots</h1>
<header class='slot'>
<h2>Slot: header</h2>
${slot.header}
</header>
${slot.default}
<main class='slot'>
<h2>Slot: main</h2>
${slot.main}
</main>")