• Public

  • Public
  • Network
  • Groups
  • Popular
  • People

Screenshot: Helix Editor running in terminal on left half of screen, browser running on right. Code (index.page.js): const Box = ({lineStyle, slot}) => html` <div class='Box'> ${slot} </div> <style> .Box { padding: 1em; border: 1px ${lineStyle} CornflowerBlue; } .Box em { color: DarkViolet; } </style> ` export default _ => html` <h1>Page</h1> <p>This is the page.</p> <${Box} lineStyle=dashed> <h2>Slotted content</h2> <p class='override'>This is <em>slotted content</em> from the page.</p> </> <p>This is the page again.</p> <style> body { font-family: sans-serif; } /* Example of using the cascade to override styles */ /* in components for slotted content. */ .override em { color: DeepPink; } </style> ` Result in browser: Heading: Page Paragraph: This is the page. Bordered box in cornflower blue contains a h2 (Slotted content) and a paragraph, “This is slotted content from the page.” where “slotted content” is in deep pink italics. Under (and outside of) the box is a paragraph that reads “This is the page again.”