2b:null 2c:["$","title",null,{"children":"htl and lit-html | danub Workspace | Observable"}] 31:[] 2f:{"id":"4d1bd12ad88951ee","slug":null,"title":"htl and lit-html","thumbnail":"bb8f923dc2f17ff999413a86664e11dd527d06938391a11ac3c6cfc00be10a1d","access_level":"public","create_time":"$D2023-07-11T06:23:02.174Z","update_time":"$D2023-07-11T06:48:30.092Z","view_time":null,"first_public_time":"$D2023-07-11T06:23:02.174Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"fb6c72bf8c07079f","login":"daenub-workspace","name":"danub Workspace","avatar_url":"https://avatars-next.observableusercontent.com/e4f1f0e556102f9cd2a189f21f80ee7ec14ffa9a2354e07281761d2df8f0cb62","tier":"starter_2024"},"version":86,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ff2ebb6da9a3f817","login":"daenub","name":"Dan Büschlen","avatar_url":"https://avatars-next.observableusercontent.com/7f91b32f10d4fd0e7474f1c131c42e52adafe12bbeafb2f07a0cfcdd3caccd98","tier":null}],"members":[{"type":"individual","id":"ff2ebb6da9a3f817","login":"daenub","name":"Dan Büschlen","avatar_url":"https://avatars-next.observableusercontent.com/7f91b32f10d4fd0e7474f1c131c42e52adafe12bbeafb2f07a0cfcdd3caccd98","tier":null,"role":"editor"},{"type":"team","id":"fb6c72bf8c07079f","login":"daenub-workspace","name":"danub Workspace","avatar_url":"https://avatars-next.observableusercontent.com/e4f1f0e556102f9cd2a189f21f80ee7ec14ffa9a2354e07281761d2df8f0cb62","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"htl and lit-html","cells":[{"id":0,"value":"# htl and lit-html","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"## htl","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"viewof numberOfHtlBlocks = Inputs.range([1, 7], {step: 1, label: \"Number of blocks\", value:1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"htlBlocks = createBlocks(numberOfHtlBlocks)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"htl.html`

${htlBlocks.map(b => htl.html.fragment`

${b}

`)}

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"## lit","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"viewof numberOfLitBlocks = Inputs.range([1, 7], {step: 1, label: \"Number of blocks\", value: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"litBlocks = createBlocks(numberOfLitBlocks)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"render(litTemplate, this)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"litTemplate = lit.html`\n

${litBlocks.map(b => lit.html`

${b}

`)}

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"## Styles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"## Import and utilities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":66,"value":"createBlocks = (n) => new Array(n).fill(null).map((_, i) => `Block ${i + 1}`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"render = function (\n template,\n element = document.createElement(\"span\"),\n options\n) {\n lit.render(template, element, options);\n return element;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"lit = import(\"lit-html\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"