31:T4cb,show_tree = element => { let show_children = element => { if (element.nodeType === Node.TEXT_NODE) { return htl.fragment`

Text

`; } if (element.nodeType === Node.DOCUMENT_FRAGMENT_NODE) { return htl.fragment`

Document

${Array.from(element.childNodes).map( childNode => htl.fragment`

${show_children(childNode)}

` )}

`; } if (element.nodeType !== Node.ELEMENT_NODE) { return htl.fragment`

${element.nodeType}

`; } let element_class = `element-${element.tagName.toLowerCase()}`; return htl.fragment`

${format_element(element)}

${Array.from(element.childNodes).map( childNode => htl.fragment`

${show_children(childNode)}

` )}

`; }; return htl(['', ''], show_children(element)); }32:[] 2f:{"title":"HTL.html and whitespaces","cells":[{"id":0,"value":"md`# HTL.html and whitespaces`","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"md`\nI'm using htl now in one of my notebooks,\nand I found that the way it adds text nodes and wraps in spans is not intuitive for me.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"md`## htl with whitespaces`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"example_with_whitespaces = htl`\n \n ${htl`\n \n `}\n \n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"show_tree(example_with_whitespaces)","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"md`## htl without whitespaces`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"example_without_whitespaces = htl`\n \n ${htl``}\n \n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"show_tree(example_without_whitespaces)","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"md`## htl.fragment with whitespaces`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"example_fragment_with_whitespaces = htl`\n \n ${htl.fragment`\n \n `}\n \n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":171,"value":"show_tree(example_fragment_with_whitespaces)","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"md`## htl.fragment with multiple children`","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"example_fragment_with_multiple_elements = htl`\n \n ${htl.fragment`

`}\n

\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":236,"value":"show_tree(example_fragment_with_multiple_elements)","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"md`## innerHTML with self closing tags`","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"example_innerhtml_self_closing = {\n let div = DOM.element('div');\n div.innerHTML = `\n \n

\n \n

\n \n `;\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":257,"value":"show_tree(example_innerhtml_self_closing)","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":93,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"format_element = element => {\n let id_attribute = htl.fragment`id=${element.id}`;\n let possible_id = element.id ? htl.fragment` ${id_attribute}` : '';\n\n let class_attribute = htl.fragment`class=${element.className}`;\n let possible_class = element.className\n ? htl.fragment` ${class_attribute}`\n : '';\n return htl`${'<'}${element.tagName.toLowerCase()}${possible_id}${possible_class}${'>'}`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"htl``","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"import { html as htl_from_observable } from \"@observablehq/htl\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"htl = (await require(\"htl@0.1\")).html","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"htl``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}