2e:null 2f:["$","title",null,{"children":"Differences between htl.html and htl.html.fragment | Toph Tucker | Observable"}] 34:[] 32:{"id":"b9e28d55fa59922a","slug":"differences-between-htl-html-and-htl-html-fragment","title":"Differences between htl.html and htl.html.fragment","thumbnail":"8e71542548d8dba4a1995ca9ce202c8570f396d6ffcae6487a46d27a69dea93d","access_level":"public","create_time":"$D2021-10-25T21:46:35.189Z","update_time":"$D2022-01-19T05:17:34.263Z","view_time":null,"first_public_time":"$D2022-01-19T05:18:31.767Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":"pro_2026"},"version":156,"publish_version":156,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null}],"members":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null,"role":"editor"}],"comments":[{"id":"f8ba009797339c95","reply_to_id":null,"content":"Why not htl.html`${toph.cloneNode(true)}` ?","create_time":"$D2022-01-19T08:20:02.208Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"ecc07c839329185d","slug":"testing","title":"Testing / Helping","owner":{"id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"---\n### Fragments are not inspected","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"htl.html`Hello world`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"htl.html.fragment`Hello world`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"htl.html`

Item ${d}

`.outerHTML","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"htl.html`

Item ${d}

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

title
hello
world

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

title
hello
world

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"htl.html`

${word}: ${def}

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"htl.html`

${word}: ${def}

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