CustomTags

src/components/App.svelte

@@ -10,6 +10,10 @@
     import Header from "./widgets/Header.svelte"
     import Footer from "./widgets/Footer.svelte"
 
+    import "./customTags"
+    import CustomTags from "./customTags/CustomTags.svelte"
+    import tags from "./customTags"
+
     export let url = ""
 
     if (url) {
@@ -60,6 +64,14 @@
 
 <Header />
 
+<CustomTags
+    html="<my-module title='t1' description='d1'>Text
+            <my-module title=t2 description=d2>Text2</my-module>
+            <b>FETT</b> im Slot
+          </my-module>"
+    tags="{tags}"
+/>
+
 <Router url="{url}">
     <Route path="/" let:params>
         <Home />

src/components/customTags/CustomTags.svelte

@@ -0,0 +1,15 @@
+<script lang="ts" context="module">
+    import Parser from "html-parser-lite"
+    export const htmlParser = new Parser()
+</script>
+
+<script lang="ts">
+    import type { SvelteComponent } from "svelte"
+    import CustomTagsChildren from "./CustomTagsChildren.svelte"
+    export let html: string
+    export let tags: { [key: string]: typeof SvelteComponent } = {}
+
+    $: rootNode = htmlParser.parse(html)
+</script>
+
+<CustomTagsChildren nodes="{rootNode.childNodes}" tags="{tags}" />

src/components/customTags/CustomTagsChildren.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import type { SvelteComponent } from "svelte"
+
+    export let nodes
+    console.log(nodes)
+    export let tags: { [key: string]: typeof SvelteComponent } = {}
+
+    const ELEMENT_NODE = 1
+    const TEXT_NODE = 3
+</script>
+
+{#each nodes as node (node)}
+    {#if node.nodeType == TEXT_NODE}{node.textContent}{:else if node.nodeType == ELEMENT_NODE}
+        {#if tags[node.tagName]}
+            <svelte:component this="{tags[node.tagName]}" {...node.attrs}
+                ><svelte:self nodes="{node.childNodes}" tags="{tags}" /></svelte:component
+            >
+        {:else}
+            <svelte:element this="{node.tagName}" {...node.attrs}
+                ><svelte:self nodes="{node.childNodes}" tags="{tags}" /></svelte:element
+            >
+        {/if}
+    {/if}
+{/each}

src/components/customTags/MyModule.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    export let title: string
+    export let description: string
+</script>
+
+<div class="my-module">
+    <h1>{title}</h1>
+    <p>{description}</p>
+    <slot />
+</div>

src/components/customTags/index.ts

@@ -0,0 +1,5 @@
+import MyModule from "./MyModule.svelte"
+
+export default {
+    "my-module": MyModule,
+}