31:[] 2f:{"title":"Differences between htl.html and htl.html.fragment","cells":[{"id":0,"value":"# Differences between htl.html and htl.html.fragment\n\n[Hypertext Literal](https://observablehq.com/@observablehq/htl) exposes `htl.html.fragment` for creating [document fragments](https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment).\n\nMike:\n\n> “The distinction in my view is more about whether you want to return one Node (Element | Text) or multiple Nodes. The way we represent multiple Nodes (without wrapping them in another Node) is a DocumentFragment.”\n\n*See also [Differences between html and htl.html](https://observablehq.com/d/e5c85606f0a2aaf6).*","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"---\n### Fragments are not inspected","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"htl.html`Hello world`","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"htl.html.fragment`Hello world`","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"---\n### Whitespace around a fragment doesn’t produce an unnecessary spurious span when you interpolate it\nMike: “The whitespace around a fragment is not technically ignored. It produces Text nodes in the DOM.”","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"htl.html`

Item ${d}

`.outerHTML","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"htl.html`

Item ${d}

`.outerHTML","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"---\n### You can make two rows at once","pinned":false,"hidden":false,"mode":"md"},{"id":120,"value":"htl.html`\n \n ${htl.html`\n \n \n `}\n

title
hello
world

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"htl.html`\n \n ${htl.html.fragment`\n \n \n `}\n

title
hello
world

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"---\n### You can make (valid) DLs from an array\nIt actually works in both cases, but the former has those extraneous spans again, which can mess up styles:","pinned":false,"hidden":false,"mode":"md"},{"id":139,"value":"htl.html`

${word}: ${def}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":146,"value":"htl.html`

${word}: ${def}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":92,"value":"---\n\nYou can show a fragment in the inspector by cloning it:","pinned":false,"hidden":false,"mode":"md"},{"id":66,"value":"toph = htl.html.fragment`Hello world`","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"((d) => (d.appendChild(toph.cloneNode(true)), d))(\n document.createElement(\"span\")\n)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}