Make filesize component nicer

page/filesize.js

@@ -1,4 +1,4 @@
-import {text, html} from '../skooma.js'
+import {text, html, fragment} from '../skooma.js'
 import element from "../element.js"
 
 element(class FileSize extends HTMLElement {
@@ -17,13 +17,17 @@ element(class FileSize extends HTMLElement {
 		this.update()
 	}
 
+	cloneChildren(deep=true) {
+		return Array.from(this.childNodes).map(node => node.cloneNode(deep))
+	}
+
 	update() {
 		if (this.file) {
 			fetch(this.file)
 				.then(response=>response.arrayBuffer())
 				.then(buffer => buffer.byteLength)
 				.then(length => {
-					this.shadowRoot.replaceChildren(text`(${length} Bytes unminified)`)
+					this.shadowRoot.replaceChildren(text`${fragment(...this.cloneChildren())} (${length} Bytes unminified)`)
 				})
 		}
 	}

page/skooma.html

@@ -19,7 +19,7 @@
 
 	<h3>What are the benefits of Skooma?</h3>
 	<p>
-		Skooma is only a small <file-size file="../skooma.js"></file-size> ES6
+		Skooma is only a <file-size file="../skooma.js">small</file-size> ES6
 		module that uses meta-programming to turn JavaScript into a
 		<span title="Domain-Specific Language">DSL</span> that generates HTML
 		and XML subtrees.