• Public

  • Public
  • Network
  • Groups
  • Featured
  • Popular
  • People

Screenshot of terminal window on left, web browser on right. Terminal window has hx (Helix Editor) running, showing 23 lines of code, with the first two highlighted: import Styles from './Styles.fragment.css' import Markup from './Markup.fragment.html' export default async () => kitten.html` <page css> <h1>HTML and CSS fragments</h1> <${Markup}> <div>I’m content from index.page.js for the default slot.</div> <content for='other'> <div>I’m content from index.page.js for a named slot.</div> </content> </> <${Styles} /> <style> /* Override styles from the imported style fragment. */ :root { --accent-colour: lightblue; --border-width: 4px; } </style> ` The browser shows a heading (HTML and CSS fragments). The rest of the content is in a blue border: I’m some HTML from Markup.fragment.html. In a pink border box, indented: I’m content from index.page.js for the default slot. Back to default indentation, out of the pink border box: I’m some other HTML Markup.fragment.html. In another pink border box, indented: I’m content from index.page.js for a named slot. Back to default indentation again: I’m yet more HTML Markup.fragment.html.