• Public

  • Public
  • Network
  • Groups
  • Popular
  • People

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.  </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>