Recent searches
Search options
Kitten has slots but what about named slots?
Yep, Kitten has those too (as of a few minutes ago in main) 
</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>")
@nielsa Thanks :)
Kitten has slots but what about named slots?
Yep, Kitten has those too (as of a few minutes ago in main)
@nielsa Thanks :)