Works!

garlic-astro/src/Clove.astro

@@ -0,0 +1,29 @@
+---
+let html = Astro.slots.render('default')
+html = await html
+// clean html, remove tabs and new lines and spaces that are not between tags
+html = html.replace(/>\s+</g, '><')
+html = html.replace(/(\r\n|\n|\r|\t)/gm, '')
+html = html.replace(/ +(?= )/g, '')
+import { JSDOM } from "jsdom";
+const dom = new JSDOM(html);
+function encodeTextNodes(node) {
+  if (node.nodeType === 3) {
+    node.nodeValue = Buffer.from(node.nodeValue).toString('base64')
+  } else {
+    for (let i = 0; i < node.childNodes.length; i++) {
+      let val = node.childNodes[i].nodeValue
+      val = val ? val.trim() : val
+      if (node.childNodes[i].nodeType === 3 && val) {
+        node.childNodes[i].nodeValue = Buffer.from(val).toString('base64')
+      } else {
+        encodeTextNodes(node.childNodes[i])
+       }
+    }
+  }
+}
+encodeTextNodes(dom.window.document.body)
+let encodedHtml = dom.serialize()
+---
+<div set:html={encodedHtml}>
+</div>

garlic-astro/src/Garlic.astro

@@ -0,0 +1,5 @@
+---
+---
+<div id="root">
+<slot />
+</div>

garlic-astro/src/MyComponent.astro

@@ -0,0 +1,8 @@
+---
+// Write your component code in this file!
+export interface Props {
+	prefix?: string;
+}
+---
+
+<div>{Astro.props.prefix} My special component</div>