Screenshot of terminal window showing hx (Helix Editor) with two panes. Left pane, selected, shows source of Markup.fragment.html: <div class='box'> <p>I’m some HTML from Markup.fragment.html.</p> ${SLOT} <p>I’m some other HTML Markup.fragment.html.</p> ${SLOT.other} <p>I’m yet more HTML Markup.fragment.html.</p> </div> Right pane shows source of Styles.fragment.css: /* I’m some CSS */ :root { --accent-colour: red; --border-width: 2px; } div { border: var(--border-width) solid var(--accent-colour); margin: 1em; padding: 1em; } /* Show slotted divs with a different colour. */ div > div { border-color: lightpink; }
https://s3-eu-central-1.amazonaws.com/mastodon-aral/media_attachments/files/112/032/044/950/950/448/original/5b1d6e886eccdcd6.png